您可以使Flexbox子项展开以适合父项，但不包含内容？ [英] Can you make a flexbox child expand to fit parent but not contents?

问题描述

我使用 flexbox 来让div在浏览器窗口中占用剩余的垂直空间，但是我想阻止它扩展。当其内容超出垂直尺寸时，我想要一个滚动条显示在现在太小的flexbox子元件中。

这可能吗？或者是有一些其他的布局技术，我应该使用这个？

下面是一个JSFiddle的链接，以显示情况： https://jsfiddle.net/83990d3a/

另一个垂直空间被一个工具栏，其准确的垂直尺寸是事先不知道的。

解决方案

只需添加 overflow：auto 到 #content （更新的小提琴） p>

  #content {
 background-color：＃ceecf5; 
 flex-grow：1; 
溢出：auto; 
} 
  

I'm using a flexbox to make a div take up the remaining vertical space in the browser window, but I'd like to prevent it from expanding beyond that. When its contents exceed its vertical size, I'd like a scrollbar to show up in the flexbox child that is now too small.

Is this possible? Or is there some other layout technique I should be using for this?

Here's a link to a JSFiddle to show the situation: https://jsfiddle.net/83990d3a/

The other vertical space is taken up with a toolbar, the exact vertical size of which is not known beforehand.

解决方案

Just add overflow: auto to #content (updated fiddle):

#content {
    background-color: #ceecf5;
    flex-grow: 1;
    overflow: auto;
}

这篇关于您可以使Flexbox子项展开以适合父项，但不包含内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！