我有一个带有3个项目的flexbox div。它的方向是专栏。
flexbox div没有高度，但其容器有最大高度。
maxheight适用于容器，但是flexbox div中的中间项很大，超出了容器的范围。
这是一个说明我的问题的codepen： http://codepen.io/jaman4dbz/pen/BWedNN
你会看到身体的计算高度为600px或某些（取决于你的窗户高度），而app 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>
答案 0 :(得分：1)
设置html, body, .app { height: 100%; }（并删除这些元素的所有其他高度设置）。设置html以及其他两个是必要的。
答案 1 :(得分：1)
我的问题是缺乏继承所有形式的身高。 我需要设置高度：继承和最大高度：继承我的模态和我的大div之间的每个div。 React有时可能会给你带来额外的div。
以下是最终的代码笔： http://codepen.io/jaman4dbz/pen/LWozeZ
.unnecessary {
height: inherit;
max-height: inherit;
}
.allstuff {
display: flex;
height: inherit;
max-height: inherit;
}
.twocol {
display: flex;
flex-direction: column;
}
编辑：此解决方案附带警告。你不能在div上有任何填充高度，你不能在它的直接孩子上有一个边距。如果你这样做，你的子元素就会超出它的父元素范围，因为它具有相同的高度，尽管它意味着被挤压到一个较小的区域。