Flex增長直到垂直居中的div內的特定最大高度，最小高度為100％

Question

我需要一個100vh最小高度容器內的中心盒子，最小高度為100％，最大高度為600px。 到目前為止，這很容易。 但在我的中心框中，我有3個其他元素（標題，內容和頁腳）。 內容部分必須增長，直到達到所有可用空間（在這種情況下，它是父級的最大高度減去標題和gg部分）。

這是可以使用flexbox嗎？

這是一個簡短的塗鴉：

我也嘗試了自己，但是一進入100％的minheight，而不是物品div的像素值，我就會遇到問題。 任何想法如何我可以解決這個問題，可以使用最小高度100％？

 * { box-sizing:border-box; margin:0; padding:0; } .wrapper { background: rgba(red, 0.3); display:flex; min-height:100vh; align-items: center; justify-content:center; //flex-direction:column; .wrapper-inner { padding:20px; max-width:80%; min-height:100%; //max-height: 500px; background:#fff; display:flex; flex-direction:column; background: rgba(green, 0.2); } .item { width:100%; min-height:100%; display:flex; flex-direction:column; max-height:600px; background:#fff; } .titel, .content, .footer { padding:10px; background: rgba(#000, 0.2); margin-bottom:10px; } .content { flex-grow:1; } } 

 <div class="wrapper"> <div class="wrapper-inner"> <div class="item"> <div class="titel">Titel here...</div> <div class="content"> content goes here. this box has to grow until the space is filled. "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="footer">gg</div> </div> </div> </div> 

這是一個工作小提琴： https ： //jsfiddle.net/zg3kLe70/14/

編輯：這里的設計：白盒必須填充可用的最大高度空間。

編輯2：我越來越近了:)最新的fiddel似乎在chrome，firefox，edge和safari中運行良好。 但在IE10 / 11中，內容並不居中。 我認為這是最小高度的問題：100 vh ... https://jsfiddle.net/zg3kLe70/26/

謝謝你，馬可

Answer 1

您可以使用較少的包裝器。 對於單個框位於中心（正文是包裝內部） ：

 html, body { height: 100%; display: flex; flex-direction: column; background: lightblue; } body { max-height: 600px; width: 80%; border: solid; margin: auto; background: crimson; color: white; } main { flex: 1; background: maroon; /* overflow:auto; */ /* recommended*/ } body>* { padding: 3vh; } 

 <header> <h1>header any height</h1> </header> <main> <p>should it be scrolling when needed</p> </main> <footer> <p>footer any height</p> </footer> 

對於幾個100vh堆疊的盒子和一個居中的盒子，需要一個額外的包裝器來設置100％的高度，一個內包裝器來設置*（max - ）*的高度。 （身體有幾個包裝）

第一個框可能是您在下面的代碼段中查找的那個，從其內容增長到最大高度設置）

 html, body , .wrapper, .wrapper-inner{ height:100%; } .wrapper, .wrapper-inner { display:flex; flex-direction:column; width:80%; margin:auto; } .wrapper-inner { max-height:600px; border:solid; background:crimson; color:white; } main { flex:1; background:maroon; overflow:auto; /* recommended*/ } .wrapper:first-of-type .wrapper-inner { height:auto; } .wrapper-inner > * { padding:3vh; } 

 <div class="wrapper"> <div class="wrapper-inner"> <header><h1>header any height</h1></header> <main> <p>first box will grow up 600px max</p> </main> <footer><p>footer any height</p></footer></div> </div> <div class="wrapper"> <div class="wrapper-inner"> <header><h1>header any height</h1></header> <main> <p>should it be scrolling when needed</p> </main> <footer><p>footer any height</p></footer></div> </div> <div class="wrapper"> <div class="wrapper-inner"> <header><h1>header any height</h1></header> <main> <p>should it be scrolling when needed</p> </main> <footer><p>footer any height</p></footer></div> </div> 

Answer 2

好的，我剛剛發現，它是如何工作的:)

首先，我需要一個100％的靈活基礎內容div。 只是最小寬度是不夠的。 其次，我刪除了所有不必要的包裝器。 我最終結果非常簡單但有效：

 * { box-sizing:border-box; margin:0; padding:0; } body { display:flex; flex-direction:column; } .wrapper { background: rgba(red, 0.3); display:flex; margin:0 auto; min-height:100vh; width:80%; .item { display: flex; flex-direction: column; flex-basis: 100%; background: rgba(green, 0.3); justify-content: center; } .titel, .content, .footer { padding:10px; background: rgba(#000, 0.2); margin-bottom:10px; } .content { flex-grow:1; flex-basis:100%; max-height:300px; min-height:100px; } } 

 <div class="wrapper"> <div class="item"> <div class="titel">Titel here...</div> <div class="content"> content goes here. this box has to grow until the space is filled </div> <div class="footer">footer here</div> </div> </div> 

這是小提琴： https ： //jsfiddle.net/zg3kLe70/33/

謝謝！