Flexbox много вложенных детей

Question

Я читал много сообщений на flexbox, но все еще есть проблема, которая меня беспокоит. Я хочу иметь липкий нижний колонтитул с использованием flexbox по this guide.

Но тогда, внутри содержимого моей страницы Я хотел бы иметь столько вложенных div s Мне нравится, и они имеют ту же высоту родителя.

Проблема заключается в том, что установка height: 100% для каждого дочернего элемента (как это было бы сделано в сценарии, отличном от flexbox) работает по-разному, если включен flexbox. Это приводит к тому, что дети получают больше высоты (переполняют родителя).

Чтобы сделать это более ясным, вот codepen without flexbox

и codepen with flexbox

Вы можете увидеть в сценарии Flexbox футер получает зеленый bakground, даже если я не хочу этого.

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

Для того, чтобы решить эту проблему, любой вложенной ДИВ должен стать flex-container?

Другими словами, существует ли способ «остановить распространение гибкого диска» в некоторой точке дерева, поэтому все divs получают родительскую высоту без переполнения?

Answer 1

display:flexbox это на самом деле не является допустимым значением :)

вам необходимо установить высоту, а также и в конечном счете, наследовать его от 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>