我有一个这样的结构:
<div style="height: 400px">
<div>...</div>
<div>...</div>
<div>...</div>
</div>
外部div有一个固定的高度，比如说400px。 现在，我希望第一个和第三个子div尽可能多地使用它们需要的400px。 那么第二个子div应该使用剩余的空间，如果空间不够，则应该出现一个滚动条。
我是一个初学者在这方面，我将非常感谢任何提示如何这可以做到。
您可以使用Flexbox来执行此操作。 这需要一段时间来适应，但是可以达到一些非常好的效果:
null
.container {
height: 400px;
display: flex;
flex-direction: column;
font-size:20px;
}
.container .box {
text-align: center;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
.container .box-1 {
background-color: green;
}
.container div:nth-child(2) {
background-color: blue;
flex: 1;
overflow: auto;
}
.container .box-3 {
background-color: red;
}<div class="container">
<div class="box box-1">box1<br>box1<br>box1<br></div>
<div class="box box-2">box2<br>box2<br>box2<br>box2<br>box2<br>box2<br>box2<br>box2<br>box2<br>box2<br>box2<br></div>
<div class="box box-3">box 3</div>
</div>