html - 嵌套的 div 高度和溢出

Question

假设我有一些固定大小的容器，我希望所有元素都能放入其中，但我不知道内部元素的所有高度。有些元素有很多文本，所以我设置了 overflow: hidden。但是这个元素忽略了容器的高度，只是拉伸(stretch)以适应内容。我该怎么做才正确？

编辑:如果我在我的容器上设置溢出，溢出的文本将被隐藏，但底部填充将被忽略(参见第二个片段)。如何从底部边框剪切文本 5 像素，使所有边看起来都相等？

.outer {
  width: 200px;
  height: 200px;
}

.inner {
  padding: 5px;
  background-color: #ccc;
  height: 150px;
  border: 1px solid black;
}

.text {
  overflow: hidden;
}

<div class="outer">
  <div class="inner">
    <span style="color: red">Some element so we can't make text 100% height</span>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </div>
  </div>
  <div>Some other text</div>
</div>

.outer {
  width: 200px;
  height: 200px;
}

.inner {
  padding: 5px;
  overflow: hidden;
  background-color: #ccc;
  height: 150px;
  border: 1px solid black;
}

.text {
  overflow: hidden;
}

<div class="outer">
  <div class="inner">
    <span style="color: red">Some element so we can't make text 100% height</span>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </div>
  </div>
  <div>Some other text</div>
</div>

Answer 1

您可以在 .inner 中嵌套一个额外的 div(我在此示例中使用了 .inner2，您可以想出一个更有意义的名称!:))。

基本上，您需要将背景/边框与控制溢出的容器分开(您是对的，溢出会到达元素的边缘，它不关心填充)。

只是一个例子，但我在 .inner 中添加了第二个 div (.inner2) 并移动了 height 和 overflow 规则改为那个规则。背景/填充/边框保持不变。

编辑:为 inner2 添加了石灰边框以更好地说明正在发生的事情。

.outer {
  width: 200px;
  height: 200px;

}

.inner {
  padding: 5px;
  background-color: #ccc;
  border: 1px solid black;
}
.inner2 {
    height: 150px;
    overflow: hidden;
    border: 1px solid lime;
}

.text {
  
}

<div class="outer">
  <div class="inner">
  <div class="inner2">
    <span style="color: red">Some element so we can't make text 100% height</span>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </div>
  </div>
  </div>
  <div>Some other text</div>
</div>