我們怎麼能讓 margin 元素填滿本身不是 Flexbox 的 Flexbox 專案？
一個元素（甚至是帶有邊距的嵌套元素）可以使用 position:absolute 輕鬆填充其容器——如果它不在 Flexbox 專案內。為什麼這不適用於 Flexbox 專案內的元素？
<main>
<nav>NAV</nav>
<section>
<div>DIV</div>
</section>
</main>
<style>
html, body {
position:absolute; top:0; left:0; right:0; bottom:0;
margin: 0;
}
main {
position:absolute; top:0; left:0; right:0; bottom:0;
display: flex;
}
nav {
flex-basis: 250px;
background-color: #eee;
}
section {
flex-basis: 100%;
background-color: #ccc;
margin: 10px;
}
div {
/* position:absolute; top:0; left:0; right:0; bottom:0; */
/* why doesn't the above line work? */
background-color: #cfc;
margin: 10px;
}
</style>
有許多類似的問題，例如這個問題和這個問題，實際上並不適用於彈性盒內的項目或帶有邊距的項目。有許多特殊情況的解決方案，例如align-self:stretch、height:100% 和box-sizing:border-box 在本例中不起作用，因為嵌套的margin 或Flexbox 本身是這樣的事實不嵌套。這些一次性駭客的問題不斷出現...
那麼填入 Flexbox 專案的通用方法是什麼？ position:absolute 這裡有什麼問題？讓元素填充其容器的最通用方法是什麼？
以下是您可能認為值得探索的想法？我將
nav作為main的兄弟而不是孩子。這對 CSS 來說不是必需的，但結構最有意義。理想情況下，您有header、nav``main、footer，也可能有aside。您確實想避免所有絕對定位。它在手機上的表現不佳 - 想像一下，如果您在頁面上放置一個文字框或文字區域，並且移動用戶單擊它並彈出軟鍵盤，會發生什麼。body { display: grid; grid-template-columns: [left] 196px [main] 1fr [right]; grid-template-rows: [top] 1fr [bottom]; grid-gap: 4px; outline: 1px dashed #616161; min-height: 100vh; min-width: 0; } body > nav { outline: 1px dashed red; grid-column-start: left; grid-column-end: main; grid-row-start: top; grid-row-end: bottom; } body > main { outline: 1px dashed blue; grid-column-start: main; grid-column-end: right; grid-row-start: top; grid-row-end: bottom; display: flex; flex-flow: column nowrap; } section { flex: 1 1 auto; display: flex; flex-flow: column nowrap; } div { flex: 1 1 auto; margin: 4px; outline: 1px dotted green; min-height: auto; }