使两个内部div的内容可滚动，同时尊重外部容器边界

Question

例如，给定以下HTML结构：

<div class=container>
  <div class=segment>
    <div class=header>header</div>
    <div class=content>bla bla...</div>
  </div>
  <div class=segment>
    <div class=header>header</div>
    <div class=content>bla bla...</div>
  </div>
</div>

我尝试了以下CSS：

.container {
  width: 200px;
  height: 300px;
}
.segment {
  height: 50%;
}
.content {
  overflow-y: scroll;
}

然而，我得到的奇怪结果看起来像这样：

另见小提琴：https://jsfiddle.net/Lyrpv0nL/

为什么会这样，我如何将这些段保存在......井，容器中？只是可滚动的内容。

理想情况下，我想将容器高度设置为相对百分比值，但如果我绝对必须使用绝对值，那么，不要让事情太复杂。

Answer 1

您好问题是您有硬编码的值，例如容器的height和段的height，因此您可以强制使用此元素。

这是更新的Fiddle

P.S。

我不确定您是否要使用溢出，但如果您这样做，则必须将其添加到.segment

好的，这就是你想要的？

Updated Fiddle

Answer 2

您需要在overflow:hidden上设置.segment，并为您的内容提供height

https://jsfiddle.net/kwjvey8n/

Answer 3

有几个问题：

1. .content元素需要添加一个高度，因为它与你需要调整的另一个元素（.header）共享空间。
2. 父容器（.segment）需要知道如何根据内容+填充等来调整自身大小。box-sizing: border-box;可以解决这个问题。

我已经用工作解决方案更新了你的小提琴：https://jsfiddle.net/Lyrpv0nL/3/