html - div 高度遵循较小的 div 高度

Question

我有两个 div，一个紧挨着另一个。左边的内容会很多，所以我想在上面放滚动条。右侧 div 的内容较少，因此左侧 div 应遵循右侧 div 的高度。

右侧 div 的内容是动态的，因此我无法设置左侧 div 的 max-height 。我尝试使用 display:table-cell 但没有成功。

.container {
  display: table;
  border: 2px solid red;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  width: 30px;
  border: 2px solid blue;
}

<div class="container">
  <div class="row">
    <div class="cell">CELL1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus a facilis saepe. Commodi exercitationem, provident nemo ea distinctio dolor ullam ab facere blanditiis inventore debitis nobis vitae maxime suscipit accusantium.</div>
    <div class="cell">CELL2: lorem lorem lorem lorem</div>
  </div>
</div>

JSFIDDLE DEMO

Answer 1

您可以通过包装第一个单元格(我在这里用 first 类来调用它)并将其称为 absolute 来完成此操作。

<div class="cell first">
  <div>
  CELL1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus a facilis saepe. Commodi exercitationem, provident nemo ea distinctio dolor ullam ab facere blanditiis inventore debitis nobis vitae maxime suscipit accusantium.
    </div>
</div>

并应用此:

.cell.first div{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

每个单元格的

和overflow-y: auto。

也许您必须调整宽度。请参阅下面的示例:

.container {
  display: table;
  border: 2px solid red;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  width: 30px;
  border: 2px solid blue;
  position: relative;
  overflow-y: auto;
}

.cell.first div{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

<div class="container">
  <div class="row">
    <div class="cell first">
      <div>
      CELL1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus a facilis saepe. Commodi exercitationem, provident nemo ea distinctio dolor ullam ab facere blanditiis inventore debitis nobis vitae maxime suscipit accusantium.
      </div>
    </div>
    <div class="cell">CELL2: lorem lorem lorem lorem</div>
  </div>
</div>

干杯!让我知道您对此的反馈。谢谢!