嵌套的 div 高度和溢出

Question

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

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

.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，你可以想出一个更有意义的名字！:)）。

基本上，您需要将 background/border 与控制溢出的容器分开（您是对的，溢出会到达元素的边缘，它不关心填充）。

只是一个例子，但我在 .inner 内添加了第二个 div (.inner2) 并将 height 和 overflow 规则移动到那个代替。 background/padding/border留在原地。

编辑：为 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>

嵌套的 div 高度和溢出

Nested divs height and overflow

html

css

overflow