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