【发布时间】：2017-09-01 13:46:33
【问题描述】：
我有一个 flexbox div，里面有 3 个项目。它的方向是列。
flexbox div 没有高度，但它的容器有一个最大高度。
maxheight 适用于容器，但 flexbox div 中的中间项很大并且超出了容器的边界。
这是一个说明我的问题的代码笔： http://codepen.io/jaman4dbz/pen/BWedNN
您会看到 body 的计算高度为 600 像素或类似的高度（取决于您的窗口高度），而应用 div 更大。
最终目标是让大 div 拉伸 flex div 的内容，直到达到最大高度，然后停止。本质上，我希望中间的大 div 能够响应。
* { box-sizing: border-box; }
body {
height: 100vh;
margin: 0;
font-family: helvetica, arial, sans-serif;
}
.twocol {
display: flex;
}
.app {
height: auto;
width: 100%;
/* height: 100vh; */
background: cadetblue;
display: flex;
flex-direction: column;
justify-content: space-between;
margin: auto;
}
/**
* Note that this demo will actually work fine in IE10. This is because in IE10, flex-shrink is 0 instead of 1. See: https://github.com/philipwalton/flexbugs#6-the-default-flex-value-has-changed
**/
.header {
width: 100%;
background: orchid;
}
/**
* 1. IE needs display: block on the main element.
* 2. IE10 sets flex-shrink to 0. This was originally according to spec, but has since changed. See: https://github.com/philipwalton/flexbugs#6-the-default-flex-value-has-changed
**/
.main {
display: block; /* 1 */
flex-grow: 1;
flex-shrink: 1; /* 2 */
background: blanchedalmond;
overflow: auto;
padding: 0 20px;
}
.footer {
width: 100%;
background: coral;
}
h1 { font-size: 36px; }
p { font-size: 16px; }<body class="twocol">
<div class="app">
<header class="header">
<p>Hello</p>
</header>
<main class="main">
<h1>Cupcake ipsum dolor sit amet</h1>
<p>Fruitcake macaroon candy canes marshmallow gummi bears biscuit I love dessert. Oat cake sugar plum marzipan gummi bears marshmallow I love brownie jelly bonbon. Sweet roll apple pie wafer fruitcake. Gummi bears lemon drops sesame snaps. Biscuit tiramisu sugar plum. Carrot cake pastry cupcake tootsie roll chocolate jujubes. Pudding muffin sweet. Cheesecake candy canes wafer gingerbread sweet.</p> <p>Fruitcake macaroon candy canes marshmallow gummi bears biscuit I love dessert. Oat cake sugar plum marzipan gummi bears marshmallow I love brownie jelly bonbon. Sweet roll apple pie wafer fruitcake. Gummi bears lemon drops sesame snaps. Biscuit tiramisu sugar plum. Carrot cake pastry cupcake tootsie roll chocolate jujubes. Pudding muffin sweet. Cheesecake candy canes wafer gingerbread sweet.</p> <p>Fruitcake macaroon candy canes marshmallow gummi bears biscuit I love dessert. Oat cake sugar plum marzipan gummi bears marshmallow I love brownie jelly bonbon. Sweet roll apple pie wafer fruitcake. Gummi bears lemon drops sesame snaps. Biscuit tiramisu sugar plum. Carrot cake pastry cupcake tootsie roll chocolate jujubes. Pudding muffin sweet. Cheesecake candy canes wafer gingerbread sweet.</p> <p>Fruitcake macaroon candy canes marshmallow gummi bears biscuit I love dessert. Oat cake sugar plum marzipan gummi bears marshmallow I love brownie jelly bonbon. Sweet roll apple pie wafer fruitcake. Gummi bears lemon drops sesame snaps. Biscuit tiramisu sugar plum. Carrot cake pastry cupcake tootsie roll chocolate jujubes. Pudding muffin sweet. Cheesecake candy canes wafer gingerbread sweet.</p> <p>Fruitcake macaroon candy canes marshmallow gummi bears biscuit I love dessert. Oat cake sugar plum marzipan gummi bears marshmallow I love brownie jelly bonbon. Sweet roll apple pie wafer fruitcake. Gummi bears lemon drops sesame snaps. Biscuit tiramisu sugar plum. Carrot cake pastry cupcake tootsie roll chocolate jujubes. Pudding muffin sweet. Cheesecake candy canes wafer gingerbread sweet.</p>
<p>Liquorice candy canes cake. Gummies wafer tart topping pastry soufflé I love pie. Cake cookie croissant cupcake chocolate cake. Liquorice jelly beans pudding sugar plum biscuit fruitcake. Soufflé tootsie roll macaroon pudding. Chocolate cake cake sesame snaps sugar plum biscuit I love croissant icing. Caramels jelly dessert candy bonbon bear claw chocolate bar cheesecake icing. Toffee I love cake gingerbread jelly-o tootsie roll. Sesame snaps pie cupcake sweet. Croissant danish brownie gummies lollipop chupa chups gummies danish.</p>
<p>Chupa chups pudding topping caramels pie. Tart jujubes ice cream muffin sugar plum. Soufflé candy canes I love lollipop pastry brownie danish apple pie. Apple pie chupa chups biscuit chocolate bar I love muffin I love. Caramels cupcake I love sugar plum icing candy canes I love macaroon. Marzipan danish cheesecake marshmallow jelly. Jelly-o sugar plum liquorice donut I love pastry candy donut. I love gummi bears chocolate.</p>
<p>Gingerbread toffee pastry gingerbread I love toffee. Biscuit jelly wafer I love cheesecake candy canes chocolate cake. I love cake I love cotton candy muffin oat cake I love I love. I love bonbon macaroon toffee powder chupa chups cotton candy tootsie roll chocolate. Croissant dessert chocolate bar. Apple pie I love croissant sugar plum cotton candy I love. Candy canes jelly I love. Jelly beans cupcake brownie pudding lemon drops</p>
<p>Cheesecake macaroon toffee sesame snaps cotton candy cotton candy I love. Cake sugar plum sweet marshmallow I love. Soufflé liquorice ice cream candy canes I love tootsie roll marzipan biscuit jelly. I love I love tiramisu donut. I love bear claw pastry toffee. Cheesecake apple pie bonbon bear claw jelly-o topping tootsie roll chocolate bar. Cake bonbon toffee donut macaroon chocolate lemon drops gummies gummies. Jelly beans chocolate bar cotton candy halvah fruitcake.</p>
</main>
<footer class="footer">
Goodbye
</footer>
</div>
<div>Col2</div>
</body>【问题讨论】：
-
如果某些东西太大而无法容纳，它当然会溢出。问题是你想让它做什么？
-
为什么不在
.app上使用height: 100vh？您已将其注释掉，但这解决了问题。 （顺便说一句，你不需要height: 100vh上的body。） -
这个例子令人困惑。我做了一个更好的。我会用更好的例子发布一个新问题。
-
@Paulie_D .main { overflow: auto } 应该创建一个滚动条。