Как мне получить дочерний элемент div flex-grow, чтобы он имел высоту 100%

В приведенном ниже примере я ожидал бы, что div innerContent будет на всю высоту div содержимого, но это не так: (плункерная ссылка)

.shell{
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: green;
}

.content{
  background-color: red;
  flex-grow: 1;
}

.innerContent{
  background-color: blue;
  height: 100%;
}

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

  <body>
    
    <div class = "shell">
      
      <div class = "header">
        <h1>Hello Plunker!</h1>
      </div>
      
      <div class = "content">
        <div class = "innerContent">
          Content
        </div>
      </div>
      
      <div class = "footer">
        Footer
      </div>
      
    </div>
    
  </body>

Ожидаемое поведение заключается в том, что внутреннее содержимое (синее) имеет ту же высоту, что и область содержимого (красное). Для меня я получаю это:

Как мне получить дочерний элемент div flex-grow, чтобы он имел высоту 100%

innerContent для меня такого же роста, как content?

— 19.02.2019 10:08

он работает так, как вы этого хотите.

— 19.02.2019 14:08

html css flexbox

19.02.2019 09:59

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...