Flexbox de nombreux enfants imbriqués

Question

J'ai lu de nombreux articles sur Flexbox mais j'ai toujours un problème qui me dérange. Je veux avoir un pied de page collant en utilisant flexbox selon this guide.

Mais alors, dans le contenu de ma page, j'aimerais avoir autant de div imbriqués que je les aime et les faire prendre la même taille que le parent.

Le problème est que le réglage de height: 100% sur chaque enfant (comme je le ferais dans un scénario non-flexbox) fonctionne différemment lorsque la flexibilité est activée. Ceci a pour résultat que les enfants obtiennent plus de taille (débordent le parent).

Pour rendre plus clair est ici un codepen without flexbox

et un codepen with flexbox

Vous pouvez voir dans le scénario de FlexBox le pied de page obtient le bakground vert même si je ne veux pas.

HTML:

<div class="sticky-footer-container"> 
    <div class="sticky-footer-content"> 
    <div class="page-container"> 
     <div class="main-menu"> 
     <div class="main-menu-selection"> 
      <div class="main-menu-selection-text"> 
      <div class="some-other-class"> 
       Some text 
      </div> 
      </div> 
     </div> 
     <div class="main-menu-selection"> 
      <div class="main-menu-selection-text"> 
      <div class="some-other-class"> 
       Some text 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
    <div class="sticky-footer"> 
    Some footer content 
    </div> 
</div> 

SCSS:

* { 
    box-sizing: border-box; 
} 

html, 
body { 
    height: 100%; 
    background: silver; 
    padding: 0; 
    margin: 0; 
} 

.sticky-footer-container { 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    .sticky-footer-content { 
    height: 100%; 
    background: blue; 
    flex: 1; 
    div { 
     height: 100%; 
    } 
    .main-menu-selection { 
     height: 50%; 
    } 
    } 
} 

.some-other-class { 
    background: green; 
} 

Pour résoudre ce problème, QUELQUE div imbriqué doit devenir un flex-container? En d'autres termes, y a-t-il un moyen de "stopper la propagation en flexion" à un point quelconque de l'arbre, de sorte que tous les divs obtiennent la hauteur parente sans débordement?

Answer 1

display:flexbox est pas vraiment une valeur valide :)

vous devez définir ainsi la taille et éventuellement hériter du html:

.sticky-footer-container { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.sticky-footer-content { 
 
    flex: 1; 
 
} 
 
/* let's inherit some height to pull the footer down */ 
 
html, 
 
body, 
 
.sticky-footer-container { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
.sticky-footer { 
 
    display: flex;/* flex item can be flexboxes as well */ 
 
    background: turquoise; 
 
    align-items: center; 
 
    justify-content: center; 
 
    min-height: 3em; 
 
}

<div class="sticky-footer-container"> 
 
    <div class="sticky-footer-content"> 
 
    <div class="page-container"> 
 
     <div class="main-menu"> 
 
     <div class="main-menu-selection"> 
 
      <div class="main-menu-selection-text"> 
 
      <div class="some-other-class"> 
 
       Some text 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="main-menu-selection"> 
 
      <div class="main-menu-selection-text"> 
 
      <div class="some-other-class"> 
 
       Some text 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="sticky-footer"> 
 
    Here my footer 
 
    </div> 
 
</div>