css外层高度600px,里面div如何自适应填满高度？

Posted 2023-03-17

<div>//外层div固定600px高度
<div class="div1"></div>// div1高度根据内容不定
<div class="div2"></div>// div2高度根据内容不定
<div class="div3"></div>// div3如何填满剩余的高度？
</div>
//例如：假如div1内容高度10px，div2内容高度15px，div3应该占剩余高度575px;
如何写css

参考技术A <style>
.div display:flex; flex-direction:column; width:600px; height:600px; border:1px solid #ccc
.div1 flex:0 0 auto; background-color:red
.div2 flex:0 0 auto; background-color:green
.div3 flex:1 1 auto; overflow:hidden; background-color:blue
</style>
<div class="div">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>