当溢出设置为滚动时，使 children 扩展到 parent 的宽度

Question

我有以下问题：

这里又是来源：

<div class="folder_browser_panel_item">
  <div class="folder_browser_panel_item_head">

  </div>
  <div class="folder_browser_panel_item_content">
    Foo Foo Foo Foo Foo Foo Foo Foo Foo Foo Foo Foo Foo Foo Foo
  </div>
</div>

.folder_browser_panel_item {
  height: 330px;
  width: 200px;
  overflow-x: scroll;
}

.folder_browser_panel_item_head {
  background: red;
  height: 100px;
}

.folder_browser_panel_item_content {
  background: black;
  width: 400px;
  height: 200px;
  color: white;
}

在这里您可以看到一个容器 div，其中包含另外 2 个 div。容器本身将溢出属性设置为滚动。此容器中的第二个 div 具有比容器更高的宽度，因此滚动条可见并且我能够滚动。如果我滚动，第一个 div 没有展开，它仍然在容器的宽度上。不过我喜欢先div展开。我喜欢第一个 div 的背景颜色，即使我滚动也能看到...

而且我知道可以将容器的背景设置为红色，但我想知道是否有其他方法。

非常感谢您的帮助！

Answer 1

我不认为有 CSS 方法可以做到这一点。您可以使用 Javascript 计算它或使用与第二个容器相同的宽度来使其工作。

See this fiddle

.folder_browser_panel_item_head {
  background: red repeat;
  height: 100px;
  width: 400px;
}

当溢出设置为滚动时，使 children 扩展到 parent 的宽度

Make children expand to parent's width when overflow is set to scroll

html

css

overflow