保持flexbox容器并使儿童在100％高度内溢出

Question

我有一个有3个部分的flexbox容器。 这个想法是每个部分都像手风琴一样扩展，但是随着其中任何一个扩展，我需要将部分内容垂直溢出，只要它将整个容器推过父母的100％高度，同时保持在100以内flexbox容器容器高度的百分比。

这是我尝试过的百分比高度的片段。

 html, body { height: 100%; margin: 0; } #container { width: 100%; height: 100%; background-color: gray; display: flex; flex-direction: column; } #a { flex: 0 1 auto; } #b { flex: 2 1 auto; } #c { flex: 0 1 auto; } #s2 { max-height: 100%; overflow: auto; background-color: lightblue; } 

 <div id="container"> <div id="a"><div>Section 1</div></div> <div id="b"> <div>Section 2</div> <div id="s2"> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> </div> </div> <div id="c"><div>Section 3</div></div> </div> 

我想要的是能够获得类似下面的代码片段，但没有指定父元素或弹性项目的显式高度。

 html, body { height: 100%; margin: 0; } #container { width: 100%; height: 100%; background-color: gray; display: flex; flex-direction: column; } #a { flex: 0 1 auto; } #b { flex: 2 1 auto; } #c { flex: 0 1 auto; } #s2 { max-height: 300px; overflow: auto; background-color: lightblue; } 

 <div id="container"> <div id="a"><div>Section 1</div></div> <div id="b"> <div>Section 2</div> <div id="s2"> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> </div> </div> <div id="c"><div>Section 3</div></div> </div> 

请注意，第3节消除了第2节推断的弹性基础中剩余的松弛。 我希望第2节增长到100％然后溢出。 这对Flexbox来说甚至可能吗？

我被类似的问题所震撼，我认为最接近的问题是：

使div填充剩余屏幕空间的高度 - 这非常相似，但我的问题是“如果溢出100％需要滚动”。

最大高度的孩子：100％溢出父母 - 我认为这是问题的根源。 如果没有设置父级高度，则无法计算溢出的高度。

如何使flexbox容器滚动？ - 再次需要基于像素单位的柔性基础。 :(。

我可以使用display: tables或其他解决方案。 输入后，我认为将需要一个JavaScript解决方案。

Answer 1

检查这个https://codepen.io/anon/pen/EJYwmq

问题是flexboxes中的项目有一个隐含的“min-height”等于它的实际高度。 你可以设置它的min-height: 0px 。

html, body {
  height: 100%;
  margin: 0;
}

#container {
  height: 100%;
  background-color: gray;
  display: flex;
  flex-direction: column;
}

#b {
  flex: 100% 1 1;
  min-height: 0px; // this is important!
  overflow: hidden;
  display: flex; // make it a flex too so you have better control of the scrollbar
  flex-direction: column;
}

#s2 {
  min-height: 0px;
  max-height: 100%;
  overflow: auto;
  background-color: lightblue;
}

Answer 2

你差不多好。 只需将#b元素设置为flexbox容器，并使用overflow:hidden或min-height:0

 html, body { height: 100%; margin: 0; } #container { width: 100%; height: 100%; background-color: gray; display: flex; flex-direction: column; } #a { flex: 0 1 auto; } #b { flex: 2 1 auto; overflow:hidden; /*added this*/ display:flex; flex-direction:column; /**/ } #c { flex: 0 1 auto; } #s2 { overflow: auto; background-color: lightblue; } 

 <div id="container"> <div id="a"><div>Section 1</div></div> <div id="b"> <div>Section 2</div> <div id="s2"> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> </div> </div> <div id="c"><div>Section 3</div></div> </div> 

而不是使#b成为Flexbox容器，您也可以考虑height:100% s2 height:100%

 html, body { height: 100%; margin: 0; } #container { width: 100%; height: 100%; background-color: gray; display: flex; flex-direction: column; } #a { flex: 0 1 auto; } #b { flex: 2 1 auto; overflow:hidden; } #c { flex: 0 1 auto; } #s2 { height:100%; overflow: auto; background-color: lightblue; } 

 <div id="container"> <div id="a"><div>Section 1</div></div> <div id="b"> <div>Section 2</div> <div id="s2"> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> </div> </div> <div id="c"><div>Section 3</div></div> </div> 

Answer 3

手风琴的#b部分填充 #container 的剩余空间 - 所以你可以做的就是在它的内容中划分这个垂直空间 - 标题和#s2 ：

• 使#b成为具有flex-direction: column的flexbox
• 还记得设置min-height: 0的#b （ min-height为自动默认为Flex项目 ）
• flex: 1在#b而不是flex: 2 1 auto就足够了flex: 2 1 auto
• 还要添加flex: 1到#s2以便它填充 #b内的剩余空间 （你可以删除max-height: 100% ）。

见下面的演示：

 html, body { height: 100%; margin: 0; } #container { width: 100%; height: 100%; background-color: gray; display: flex; flex-direction: column; } #a { flex: 0 1 auto; } #b { flex: 1; /* this would do */ display: flex; /* added*/ flex-direction: column; /* added */ min-height: 0; /* added */ } #c { flex: 0 1 auto; } #s2 { flex: 1; /* added */ /* max-height: 100%;*/ overflow: auto; background-color: lightblue; } 

 <div id="container"> <div id="a"><div>Section 1</div></div> <div id="b"> <div>Section 2</div> <div id="s2"> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> </div> </div> <div id="c"><div>Section 3</div></div> </div> 

---

现在您拥有全视口手风琴 - 您还可以让#container在手风琴项目展开时只占用所需的空间，并允许它扩展到视口高度并且仅在之后溢出 - 只需更改height: 100%在container达到max-height: 100% - 见下面的演示：

 html, body { height: 100%; margin: 0; } #container { width: 100%; max-height: 100%; /* changed to max-height */ background-color: gray; display: flex; flex-direction: column; } #a { flex: 0 1 auto; } #b { flex: 1; /* this would do */ display: flex; /* added*/ flex-direction: column; /* added */ min-height: 0; /* added */ } #c { flex: 0 1 auto; } #s2 { flex: 1; /* added */ /* max-height: 100%;*/ overflow: auto; background-color: lightblue; } 

 <div id="container"> <div id="a"><div>Section 1</div></div> <div id="b"> <div>Section 2</div> <div id="s2"> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> </div> </div> <div id="c"><div>Section 3</div></div> </div>