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;
}