如何确保Flex div的内容保留在其容器内？

我有一个flexbox div，里面有3个项目。它的方向是专栏。如何确保Flex div的内容保留在其容器内？

flexbox div没有高度，但其容器具有最大高度。

maxheight适用于容器，但flexbox div中的中间项是巨大的，并且超出了容器边界。

这里的说明我的问题一个codepen： http://codepen.io/jaman4dbz/pen/BWedNN

你会看到身体有600px的一个计算的高度或一些这样的（取决于你的窗口高度），而应用程序的div是waaaaay较大。

最终目标是让大型div伸展flex 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>

来源

2017-04-06 Jason McCarrell

如果有些东西太大而不适合当然会溢出。这个问题你想要做什么？ –

为什么不在''app'上使用'height：100vh'？你已经注释掉了，但是解决了这个问题。（顺便说一句，你不需要身体上的'height：100vh'。） –

这个例子令人困惑。我有一个更好的我做的。我会用更好的例子发布一个新问题。 –

我的问题是缺乏继承所有形式的高度。我需要设置高度：继承和最大高度：继承我的模态和我的大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上填充任何高度，你不能在它的直接子元素上留下空白。如果你这样做，你的孩子元素很好地超出了其父母的界限，因为它具有相同的高度，尽管它意图被挤压到更小的区域。

来源

2017-04-06 14:55:40

这不是一个真正的React问题。 CSS'height'属性默认不会继承值。请参阅规范中的属性定义：https://www.w3.org/TR/CSS22/visudet.html#the-height-property –

这是组件设计的反应问题。 React不会插入div，开发者会这样做，因为每个组件都需要一个包含元素。这意味着我们所有被很好地分割的组件都会导致很多div，并且需要很多“继承”值。 –

设置（和删除那些元素的所有其他高度设置）。有必要设置html以及另外两个。

来源

2017-04-06 13:39:47 Blazemonger

这几乎奏效！这是我使用的更好的例子。 http://codepen.io/jaman4dbz/pen/GWaMZW 虽然我想我会重写我的问题，因为我更具体地了解问题所在。 –

目前还不清楚你想要做什么 - 你正在显示：只有一个元素的Flex容器。但是，如果添加'.twocol {overflow：hidden;最大高度：100％; }' – Blazemonger

雅，我认为我的主要项目的CSS是简单的破碎。我的最新代码笔的工作原理如下： http://codepen.io/jaman4dbz/pen/LWozeZ 对不起，我的问题不是更有用，但是，奇怪的是，你确实让我通过身高解决了一个问题： 100％。我会尝试通过我们的成千上万的sass线丛林，看看什么是打破风格。我会回来一个解决方案，这很可能是如此具体以至于无用于SO = P –

如何确保Flex div的内容保留在其容器内？

回答

相关问题