我们可以为带有 display: table 的 div 设置固定高度吗？

问题描述

这是我的代码：

.wrapper {
  height: 48px;
  width: 100%;
  display: table;
  table-layout: fixed;
  overflow: auto;
  background: lightgreen;
}

.column {
  display: table-cell;
  border: thin solid gray;
}

<div class="wrapper">
  <div class="column">
  one one one one one one one one one one one
  one one one one one one one one one one one
  one one one one one one one one one one one
  one one one one one one one one one one one
  one one one one one one one one one one one
  one one one one one one one one one one one
  one one one one one one one one one one one
  one one one one one one one one one one one
  </div>
  <div class="column">
  two two two two two two two
  </div>
  <div class="column">
  two two two two two two two
  </div>
</div>

.wrapper 的总高度远大于 48px（.wrapper 中设置的高度）。是否可以让 .wrapper 遵守通过 CSS 设置的高度？

解决方法

我不认为带有 display: table; 的元素可以有这样定义的高度。您需要用另一个块元素包裹该元素，然后在父元素上定义高度：

<div style="height: 48px; overflow: auto;">
  <div class="wrapper">
    <div class="column">
    one one one one one one one one one one one
    one one one one one one one one one one one
    one one one one one one one one one one one
    one one one one one one one one one one one
    one one one one one one one one one one one
    one one one one one one one one one one one
    one one one one one one one one one one one
    one one one one one one one one one one one
    </div>
    <div class="column">
    two two two two two two two
    </div>
    <div class="column">
    two two two two two two two
    </div>
  </div>
</div>