防止flex项溢出flex容器

Question

在下面的代码中，有没有办法使.inner不溢出.outer ？

我不想.inner改变的高度.outer 。

我想摆脱身体滚动条。

 html, body { height: 100vh; } body, div { margin: 0; padding: 0; } .outer { height: 100%; display: flex; flex-flow: column; align-content: stretch; } .inner { display: flex; flex: 0 0 auto; align-items: stretch; height: auto; max-height: 100%; } .column { border: 1px solid #000; overflow-y: auto; margin: 0 10px; } .column-left { width: 25%; } .column-right { height: 100%; width: 75%; display: flex; flex-flow: column; } .content { overflow: auto; } .controls { } 

 <div class="outer"> <h1> Heading of different height </h1> <div class="inner"> <div class="column column-left"> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> </div> <div class="column column-right"> <div class="content"> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> </div> <div class="controls"> Variable height <br> 1 </div> </div> </div> </div> 

https://codepen.io/anon/pen/jYxXKQ

Answer 1

您的代码中的大部分CSS都可以删除。

这与有用的弹性设置没有必要或冲突。

只需使用flex属性即可实现布局。

 .outer { height: 100vh; display: flex; flex-flow: column; } .inner { display: flex; flex: 1; min-height: 0; /* https://stackoverflow.com/q/36247140/3597276 */ } .column { overflow-y: auto; margin: 0 10px; border: 1px solid #000; } .column-left { flex: 0 0 25%; } .column-right { flex: 1; display: flex; flex-flow: column; } body, div { margin: 0; padding: 0; } 

 <div class="outer"> <h1>Heading of different height</h1> <div class="inner"> <div class="column column-left"> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> </div> <div class="column column-right"> <div class="content"> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> </div> <div class="controls"> Variable height <br> 1 </div> </div> </div> </div> 

https://codepen.io/anon/pen/VydvWR

Answer 2

好吧，我自己做了，希望这会帮助别人。

我们的想法是围绕.inner制作另一个包装器并使其占用.outer自由空间。 你可以在下面的代码中看到它作为.inner-wrap 。

该包装器必须是position: relative ，而.inner必须是position: absolute ，所以我们可以通过将left，top，right和bottom设置为零来使.inner占用.inner-wrapper的所有空间。

 html, body { height: 100vh; } body, div { margin: 0; padding: 0; } .outer { height: 100%; display: flex; flex-flow: column; align-content: stretch; align-items: stretch; } .inner-wrap { position: relative; flex: 1; } .inner { display: flex; align-items: stretch; align-content: stretch; position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .column { border: 1px solid #000; overflow-y: auto; margin: 0 10px; } .column-left { width: 25%; } .column-right { width: 75%; display: flex; flex-flow: column; } .content { overflow: auto; } .controls { } 

 <div class="outer"> <h1> Heading of different height </h1> <div class="inner-wrap"> <div class="inner"> <div class="column column-left"> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> </div> <div class="column column-right"> <div class="content"> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> </div> <div class="controls"> Variable height <br> 1 </div> </div> </div> </div> </div> 

https://codepen.io/anon/pen/GyGKpx

Answer 3

我通过flex和overflow来实现这一点，也许这可以更适合你的代码。

 html, body { height: 100%; } body, div { margin: 0; padding: 0; } .outer { height: 100%; display: flex; flex-flow: column; } .inner { display: flex; height: 100%; } .column { border: 1px solid #000; overflow-y: auto; margin: 0 10px; } .column-left { width: 25%; } .column-right { height: 100%; width: 75%; display: flex; flex-flow: column; } .content { overflow: auto; } 

 <div class="outer"> <h1> Heading of different height </h1> <div class="inner"> <div class="column column-left"> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> </div> <div class="column column-right"> <div class="content"> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> <h2>Row</h2> </div> <div class="controls"> Variable height <br> 1 </div> </div> </div> </div>