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. 工作正常，当项目不引起水平滚动时，突出显示会延伸。但是当它们太长时，突出显示只会延伸到框的宽度，而不是项目的宽度，因此情况 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;
}

CSS：根据内容或包装器调整宽度 - 以较宽者为准

CSS: Fitting width to content or wrapper - whichever is wider

html

css

width

horizontal-scrolling