如何使“子”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>