Html 平均分割固定大小容器的空间。flexbox的案例？

如何设计HTML/CSS结构，将固定大小的容器水平拆分为三个部分。第一部分的高度应与内容所需的高度相同。第二部分和第三部分将共享剩余的空间，不管其内容如何。如果其内容的大小超过此限制，则该节应可滚动

它的HTML部分很简单：一个包含三个子

div

的

div

容器

我试图用flexbox解决这个问题，但可能有更好的选择：

css部分：

#container {
  position: absolute;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
}

#item1 { flex: 0 0 auto; }
#item2 { flex: 1 1 auto; }
#item3 { flex: 1 1 auto; }

不幸的是，只有当第2项或第3项的内容不是太大时，这才有效

有关该问题的更详细的实现，请参阅

正文{
保证金：0；
溢出：隐藏；
}
* {
框大小：边框框；
}
#容器{
位置：绝对位置；
宽度：100%；
身高：100%；
边框：2倍纯绿；
显示器：flex；
弯曲方向：立柱；
}
#项目1{
flex:0自动；
背景色：深蓝色；
}
#项目2{
flex:1自动；
背景色：达克朗格；
}
#项目3{
flex:1自动；
背景颜色：MediumAquaMarine；
}

我会和我的内容一样高。
剩下的我只拿50%。无论我的内容有多短或多长。如果需要，应该有滚动条。
剩下的50%我要了！

对吧?？

对吧?？

对吧?？

对吧?？

对吧?？

对吧?？

对吧?？

对吧?？

对吧?？

对吧?？

对吧?？

对吧?？

对吧?？

对吧?？

对吧?？

对吧?？

对吧?？

对吧?？

对吧?？

对吧?？

对吧?？

对吧?？

对吧?？

是的，您可以使用flex。下面是对代码的一点改进。Item1不需要有弹性规则，item2和item3将有

flex:1

我还添加了

overflow-y:auto规则，使其可滚动


很好，这很有效。所以“0 0自动”似乎是默认值。看起来关键部分是其他“自动”属性。我猜flex:1等于flex:1。谢谢。奖金：如果第2项和第3项之间的比例可以通过鼠标调整，你会怎么做。琐碎的添加或：另一篇帖子？听起来像另一篇帖子：）
#item1 {background-color: Bisque ; }
#item2 { flex: 1; background-color: DarkOrange ; overflow-y: auto;}
#item3 { flex: 1; background-color: MediumAquaMarine ; overflow-y: auto;}