如何确保flex div的内容留在容器中？
[英]How do I ensure the contents of my flex div stay within it's container?
问题描述
I have a flexbox div with 3 items in it. 
我有一个flexbox div，其中有3个项目。 Its direction is column. 它的方向是列。
The flexbox div doesn't have height, but its container has a max-height. flexbox div没有高度，但是其容器具有max-height。
The maxheight works for the container, but the middle item in the flexbox div is huge and goes way outside the bounds of it's container. maxheight适用于容器，但是flexbox div中的中间项很大，超出了容器的界限。
Here's a codepen illustrating my issue: http://codepen.io/jaman4dbz/pen/BWedNN 这是一个说明我的问题的codepen： http ://codepen.io/jaman4dbz/pen/BWedNN
You'll see the body has a computed height of 600px or some such (depending on your window height), while the app div is waaaaay larger. 您会看到主体的计算高度为600px左右（取决于您的窗口高度），而app div更大。
The ultimate goal is to have the large div stretch the contents of the flex div until it reaches max-height, then stop. 最终目标是让大div拉伸flex div的内容，直到达到最大高度，然后停止。 Essentially I want the middle large div to be responsive. 本质上，我希望中大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>
2 个解决方案
解决方案1
1 2017-04-06 13:39:47
Set html, body, .app { height: 100%; } 设置html, body, .app { height: 100%; } html, body, .app { height: 100%; } (and remove all other height settings for those elements). html, body, .app { height: 100%; } （并删除这些元素的所有其他高度设置）。 It's necessary to set html as well as the other two. 有必要设置html以及其他两个。
解决方案2
1 已采纳 2017-04-06 14:55:40
My issue was a lack of inheriting all forms of height. 我的问题是缺乏继承所有身高的形式。 I needed to set height: inherit AND max-height: inherit for every div between my modal and my large div. 我需要设置高度：继承和最大高度：为模态和大div之间的每个div继承。 React can burn you with extra divs sometimes. React有时会给你额外的div烧伤。
Here is the final code pen that works: http://codepen.io/jaman4dbz/pen/LWozeZ 这是有效的最终代码笔： 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;
}
EDIT: This solution comes with a caveat. 编辑：此解决方案带有警告。 You can't have any padding on the div with height and you can't have a margin on it's immediate children. 您不能在div上设置任何具有高度的填充，也不能在其直接子对象上留有边距。 If you do, your child element well go outside the bounds of it's parent, because it has the same height, evem though it's meant to be squeezed into a smaller area. 如果这样做，您的子元素很可能会超出其父元素的边界，因为它的高度和外缘是相同的，尽管它原本是要压缩到较小的区域。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.