Comment faire en sorte qu'un élément remplisse son conteneur en utilisant CSS ?

Question

Comment pouvons-nous faire en sorte que des éléments de marge remplissent des éléments Flexbox qui ne sont pas eux-mêmes Flexbox ?

Un élément (même un élément imbriqué avec des marges) peut facilement remplir son conteneur en utilisant position:absolute - s'il ne se trouve pas dans un projet Flexbox. Pourquoi cela ne fonctionne-t-il pas pour les éléments d'un projet 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>

Il existe de nombreuses questions similaires comme celle-ci et celle-ci qui ne fonctionnent pas réellement pour les éléments à l'intérieur d'une flexbox ou pour les éléments avec des marges. Il existe de nombreuses solutions de cas particuliers, comme align-self:stretch、height:100% 和 box-sizing:border-box 在本例中不起作用，因为嵌套的 margin ou le fait que Flexbox elle-même n'est pas imbriquée. Des problèmes ne cessent de surgir avec ces pirates informatiques ponctuels...

Alors, quelle est la manière générale de remplir un projet Flexbox ? position:absolute Quel est le problème ici ? Quelle est la manière la plus générale pour qu’un élément remplisse son conteneur ?

Answer 1

Voici quelques idées qui, selon vous, méritent d'être explorées ? Je le ferai nav 作为 main 的兄弟而不是孩子。这对于 CSS 来说不是必需的，但结构最有意义。理想情况下，您有 header、nav``main、footer，也可能有 aside. Vous voulez vraiment éviter tout positionnement absolu. Cela ne fonctionne pas bien sur mobile - imaginez ce qui se passerait si vous mettiez une zone de texte ou une zone de texte sur la page et qu'un utilisateur mobile cliquait dessus et qu'un clavier virtuel apparaissait.

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