Html CSS：适合内容或包装的宽度-以较宽者为准

所以我有一组列表项，我试图让鼠标在突出显示上看起来正确。以下是html：

<div id="wrapper">
  <div id="box">
    <div class="item">Lorem ipsum dolor sit amet, sit nonumy utamur ponderum ex</div>
    <div class="item">Eu liber libris sit, qui aeque primis an</div>
  </div>
</div>

这里有一个我正在使用的JSFIDLE:

---

现在，我的目标是：

当列表中的项目宽度都小于包装（因此，没有水平滚动）时，突出显示应该从左向右延伸：

但是，当项目足够长，足以使包装滚动时，突出显示应拉伸最长项目的长度，即包装的完整滚动宽度

---

默认情况下，情况1。工作正常，当项目不会导致水平滚动时，高光会延伸。但是当它们太长时，高光只会延伸到框的宽度，而不会延伸到项目的宽度，因此案例2失败

我似乎已经发现，在包装器上设置

display:flex

，会使项目的宽度与文本相符，并在导致水平滚动时正确高亮显示。但是，当项目不生成水平滚动时，它不会拉伸框的整个宽度，情况1失败：

我还认为赋予

#box

元素

最小宽度：100%

将迫使它至少达到该宽度。但相反，它适用于案例1。而不是案例2。同样，尽管包装器的

显示：flex

---

有什么想法吗？

在包装器的子级上使用flex grow:1

---

在包装器的子级上使用flex-grow:1

---

我真不敢相信它这么简单！谢谢@史密斯，欢迎！我很幸运，通常是我为一个“简单”的修复而发疯！谢谢@史密斯，欢迎！我很幸运，通常我会因为一个“简单”的修复而发疯。

#wrapper {
  overflow: auto;
}

#wrapper {
  width: 100%;
  height: 300px;
  overflow: auto;
  border: 1px solid #808080;
  /* remove * to toggle -> */
  display: flex;
  /**/
}
#box {
  flex-grow: 1;
  padding: 10px;
}