Div高度跟随较小的div高

Question

我有两个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%; 
} 

每个 cell

和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>

干杯！让我知道你对此的反馈。谢谢！

Answer 2

试试这个，

HTML

<div class="container"> 
    <div class="row"> 
    <div class="cell"> 
    <div class="cell-content"> 
    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"> 
     <div class="cell-content">CELL2: lorem lorem lorem lorem </div> 
    </div> 
    </div> 
</div> 

CSS

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