Html Div height跟随较小的Div height

我有两个沙发，一个挨着另一个。左边的那个会有很多内容，所以我想把滚动条放在上面。右div的内容较少，所以左div应该跟随右div的高度

---

右div的内容是动态的，因此我无法设置左div的

max height

。我尝试了

display:table cell

，但未成功

.container{
显示：表格；
边框：2倍纯红；
}
.行{
显示：表格行；
}
.细胞{
显示：表格单元格；
宽度：30px；
边框：2件纯蓝；
}

第1单元：Lorem ipsum Door sit amet，Concertetur Adipising Elite。驱避剂，驱避剂。通常情况下，这是一项特殊的工作，由发明者debitis nobis vitae maxime suscipit accusantium提供。
第二单元：lorem lorem lorem

试试这个

HTML

---

您可以通过包装第一个单元格（我在这里用

first

class将其称为）并将其称为

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>

和

overflow-y:auto

用于每个

单元格

也许你必须调整宽度。见下例：

.container{
显示：表格；
边框：2倍纯红；
}
.行{
显示：表格行；
}
.细胞{
显示：表格单元格；
宽度：30px；
边框：2件纯蓝；
位置：相对位置；
溢出y：自动；
}
.牢房，第一组{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
}

第1单元：Lorem ipsum Door sit amet，Concertetur Adipising Elite。驱避剂，驱避剂。通常情况下，这是一项特殊的工作，由发明者debitis nobis vitae maxime suscipit accusantium提供。
第二单元：lorem lorem lorem

right div的内容是动态的，因此我无法设置left div的最大高度。我更新了我的问题。那么，是否要在窗口/文档大小的100%高度之后设置滚动条？

.container {
  display: table;
  border: 2px solid red;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  width: 30px;
  border: 2px solid blue;
}
.cell-content{
  max-height:200px;  /* as per your requirement */
  overflow:auto;
}

<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%;
}