Wie kann man mit CSS dafür sorgen, dass ein Element seinen Container füllt?

Question

Wie können wir Randelemente dazu bringen, Flexbox-Elemente zu füllen, die selbst keine Flexbox sind?

Ein Element (sogar ein verschachteltes Element mit Rändern) kann seinen Container einfach mit position:absolute füllen – wenn es sich nicht in einem Flexbox-Projekt befindet. Warum funktioniert das nicht für Elemente innerhalb eines Flexbox-Projekts?

<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>

Es gibt viele ähnliche Fragen wie diese und diese, die für Artikel in einer Flexbox oder Artikel mit Rändern eigentlich nicht funktionieren. Es gibt viele Sonderfalllösungen, wie zum Beispiel align-self:stretch、height:100% 和 box-sizing:border-box 在本例中不起作用，因为嵌套的 margin oder die Tatsache, dass Flexbox selbst nicht verschachtelt ist. Bei diesen einmaligen Hackern tauchen immer wieder Probleme auf...

Was ist also der allgemeine Weg, ein Flexbox-Projekt zu füllen? position:absolute Was ist hier das Problem? Was ist die allgemeinste Art und Weise, wie ein Element seinen Container füllen kann?

Answer 1

以下是您可能认为值得探索的想法？我将 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;
}

NAV

  

    
DIV
  

Answer 2

  
NAV
  

    
DIV