Html 制作两个内部div'；内容可滚动，同时考虑外部容器边界

例如，给定以下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>

但我得到的奇怪结果是这样的：

还可以看到这把小提琴：

为什么会这样？我如何将这些片段保存在。。。嗯，集装箱？只是可滚动的内容

---

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

您好，您的问题是您有硬编码值，例如容器的

高度和段的
高度，所以你要强迫你的元素进入这个

以下是最新的

附言

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

啊，好吧，那就是你想要的

您需要在
.segment
上设置
溢出：隐藏
，并为您的内容提供
高度

有几个问题：

.content元素需要添加一个高度，因为它与另一个元素（.header）共享空间，您需要为此进行调整
父容器（.segment）需要知道如何根据其内容+填充等调整自身大小。
框大小：边框框在这里起作用

我已经用一个有效的解决方案更新了您的小提琴：
不，这不是我的问题，这是我的要求！我需要容器是高度限制的定义。我希望内容是可滚动的，而不是片段，否则会将标题滚动到看不见的地方。这似乎有效！实际将
.segment
设置为
溢出：隐藏；高度：计算（50%-20px）和
。内容
到
高度：100%
似乎成功了，谢谢！我不明白为什么我必须在
.segment
上显式设置
溢出：hidden
，因为segment上的高度和内容上的溢出定义已经定义了足够的约束，不？谢谢，这澄清了一些事情。后续问题：我将如何使这两个部分只占用其内容所需的空间？例如，如果第一段几乎为空，则第二段应占据所有剩余空间。@user511287我假设您希望该段根据其内部内容进行增长/收缩？您必须以其他方式执行此操作，或者使用JS计算内容的维度，或者使用Flex-Box模型。让内容可滚动可以解决这个棘手的问题。谢谢，太糟糕了，我将在这里研究使用flexbox
.container {
  width: 200px;
  height: 300px;
}
.segment {
  height: 50%;
}
.content {
  overflow-y: scroll;
}