如何確保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的內容保留在其容器內？

回答

相關問題