Дисплей: гибкий или высота: авто не работает

Question

Почему нет div, который имеет стиль отображения: flex или height: автоматически расширять div до нижней части страницы? Особенно, если родительские divs установлены на высоту: 100%?

я обеспечиваю очень конкретный пример, чтобы продемонстрировать это:

http://jsfiddle.net/p1fxh128/1/

<div style="height:100vh"> 
    <section style="height:100vh"> 
     Welcome...red div below should fill entire container   

      <section style="display:flex; flex-direction: column; background:red; height: auto"> 
       <header> 
       Red Header Here... 
       </header> 
       <div> 
       Red Body here... 
       </div> 
       <footer> 
       Red Footer here... 
       </footer> 
      </section> 

     Random stuff below should still be displayed 

    </section> 
</div> 

Обратите внимание на красный DIV в этом примере. Почему он не заполняет сетку вертикально?

Answer 1

Я предполагаю, что вы имеете в виду, что красная секция должна взять остаток страницы не быть 100% от самой страницы.

это случается.

* { 
 
    -webkit-background-origin:; 
 
    background-origin:; 
 
    margin: 0; 
 
} 
 
.wrap { 
 
    height:100vh; 
 
} 
 
.wrap > section { 
 
    height:100vh; 
 
    display:flex; 
 
    flex-direction: column; 
 
} 
 
.wrap > section > section { 
 
    background:red; 
 
    flex:1; 
 
}

<div class="wrap"> 
 
    <section>Welcome...red div below should fill entire container 
 
     <section> 
 
      <header>Red Header Here...</header> 
 
      <div>Red Body here...</div> 
 
      <footer>Red Footer here...</footer> 
 
     </section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit perferendis fugit, ducimus veniam voluptates debitis. Voluptas, recusandae impedit numquam obcaecati accusamus consequuntur, illo fuga ea enim quod facere, repellat tempore!</section> 
 
</div>

Answer 2

«Обратите внимание на красный div в этом примере». Я предполагаю, что вы имеете в виду section с красным фоном.

Вот моя вилка вашей jsfiddle:

http://jsfiddle.net/lbispo/3u5rkysk/

Я снял свои встроенные стили и прибавил:

html, body, body > div, body > div > section { height: 100%; } 
body > div > section { display: flex; flex-direction: column; } 
body > div > section > section { flex: 1; background-color: red; } 

Селекторы будет проще с идентификаторами и классов, которые вы имели в вашем предыдущий пример. height: 100% добавлен в html и body, а также изменен селектор для flexbox, добавив flex: 1 к элементу stretchy.

Надеюсь, это поможет. Мой первый ответ!