弹性盒子内竖向排列 有3个子盒子 其中第一个和第三个高度已知 如何让中间的第二个沾满剩余控件

您可以使用flex布局，将容器设置为flex，并使用flex-direction属性将子元素纵向排列。然后，设置第一个和第三个子元素的高度，将第二个子元素的flex-grow属性设置为1，这样它就可以沾满剩余空间。具体代码如下：

HTML代码：

<div class="container">
  <div class="box box1">第一个子盒子</div>
  <div class="box box2">第二个子盒子</div>
  <div class="box box3">第三个子盒子</div>
</div>

CSS代码：

.container {
  display: flex;
  flex-direction: column;
  height: 300px; /* 容器高度 */
}
.box {
  border: 1px solid #000;
  box-sizing: border-box;
  text-align: center;
  padding: 20px;
}
.box1 {
  height: 100px;
}
.box2 {
  flex-grow: 1;
}
.box3 {
  height: 50px;
}

这样设置后，第一个和第三个子盒子的高度分别为100px和50px，第二个子盒子会沾满剩余空间。您可以根据实际情况调整容器高度和子盒子高度。