Css 3个div占据父级的所有高度，第一个和最后一个div可变高度

我一直在尝试实现以下设计：

使用javascript，我很容易就成功了。我试图实现相同的行为，但没有任何Javascript，只使用CSS，但失败了。我想知道这是否可能

我当前的实现是基于divs的，但它可以是任何其他html元素（表等）

一些可变内容
应占据剩余高度
一些可变内容

这是一个实施的基础

谢谢你的帮助。

干杯！ 是的，你可以用。简单明了，将容器设置为display:flex，然后可以使用flex-grow属性指定哪些容器子容器必须增长，哪些容器子容器没有增长

#parent {
  display: flex;
  flex-direction: column;
}

#one, #three {
 flex-grow: 0;
}

#two {
  flex-grow: 1;
}

请参阅更新的小提琴：

---

PS：检查您的最低浏览器支持要求；）

如果您不想支持旧浏览器，这似乎是一个正确的答案！谢谢

#parent {
  display: flex;
  flex-direction: column;
}

#one, #three {
 flex-grow: 0;
}

#two {
  flex-grow: 1;
}