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

Question

所以我有一组列表项，我试图让鼠标悬停突出显示它们看起来正确。这是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>

然后，我将提供包装器overflow: auto。因此，如果列表项太长，包装器将允许水平滚动：

#wrapper {
  overflow: auto;
}

这是我正在使用的 JSFiddle：
https://jsfiddle.net/codesmith32/e9se5120/

---

现在，我的目标是：

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

1. 但是，当项目长到足以使包装器滚动时，突出显示应拉伸最长项目的长度，即包装器的整个滚动宽度。

---

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

我似乎发现在包装器上设置display: flex 会导致项目的宽度适合文本并在它们导致水平滚动时正确突出显示。但是，当项目 不 生成水平滚动时，它不会拉伸框的整个宽度，失败案例 1。：

我还认为给#box 元素min-width: 100% 会强制它至少是那个宽度。但相反，它适用于案例 1. 而不是案例 2. 再次，尽管包装器的 display: flex.

有什么想法吗？

Answer 1

在包装器的子级上使用 flex-grow:1。 https://jsfiddle.net/3p9kyu7v/1/

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