如何使「子」div不會自己溢出，並使用它的父div的填充渲染？

Question

首先，我的代碼

HTML：

<div class="div parent"> 
    Title 
    <div class="div child"> 
    <div class="overflowed"> 
    </div> 
    </div> 
</div> 

CSS：

.div { 
    border: 1px solid #000000; 
    padding: 10px; 
    overflow: auto; 
} 

.parent { 
    max-height: 100px; 
} 

.overflowed { 
    min-height: 150px; 
} 

對不起，我不擅長描述關於網頁設計的東西，所以如果我不當形容什麼東西，請告訴我，謝謝:)

如何使子div渲染像this，它的底部邊框總是有餘量，它是pa租金的底部邊界？

順便說一下，HTML第2行中的「標題」會通過不同的屏幕分辨率更改它的高度，因此它不能被最大高度屬性限制。

的jsfiddle這裏：https://jsfiddle.net/dj3ydshf/

Answer 1

你那裏幾乎沒有。我認爲這是你在找什麼：

.div { 
 
     border: 1px solid #000000; 
 
     padding: 10px; 
 
     overflow: auto; 
 
    } 
 
    
 
    .parent { 
 
     max-height: 200px; 
 
    } 
 
    
 
    /* set overflow y-scroll */ 
 
    /* and give this element a max-height or height */ 
 
    .child { 
 
     overflow: y-scroll; 
 
     max-height: 50px; 
 
    }

<div class="div parent"> 
 
    tuitit 
 

 
    <div class="limit"> 
 

 

 
    <div class="div child"> 
 
     SSSS 
 
     <br> SSSS 
 
     <br> SSSS 
 
     <br> SSSS 
 
     <br> SSSS 
 
     <br> SSSS 
 
     <br> 
 
    </div> 
 
    </div> 
 
</div>