Css: заставить гибкого внука заполнить его родителя

Question

У меня есть следующая структура:

    .root {
      display:flex;
      flex-direction:column;
      min-height:80vh;
      background-color: lightgrey;
    }
    
    .mainContent {
        background-color: aliceblue;
        flex: 1 1 0%;
    }
    
    .iWantToBeBig {
       height:100%; /* does not work... */
       background-color: orange;
    }

    <div class="root">
       <div>Irrelevant header</div>
       <div class="mainContent">
           <div class="iWantToBeBig">but I stay small</div>
       </div>
       <div>Irrelevant footer</div>
    </div>
    

К сожалению, у меня есть ограничение, на которое я не могу (и не хотел бы) влиять на элементы root и mainContent.Они приходят из сторонних библиотек и выглядят нормально: верхний и нижний колонтитулы остаются сверху и снизу корневого окна и имеют размер контента.Элемент mainContent занимает остаток доступного пространства.Пока все в порядке.

Моя проблема в том, что мой внук flexbox (это происходит из моего кода) не получает высоту своего родителя.Если я правильно понимаю, это потому, что mainContent не имеет установленной высоты, а использует flex-based.Но, тем не менее, я не знаю, как заставить элемент iWanntToBeBig получить всю высоту своего родителя, не мешая стороннему коду.

Редактировать : я правильно обновил свой вопрос и изменилмои опечатки.

Корневой элемент имеет минимальную высоту, а не набор свойств высоты.Я думаю, что это корень проблемы.добавление свойства высоты решает проблему.Интересно, есть ли способ решить мою проблему без необходимости изменения корневого элемента.

В противном случае мне придется изменить сторонний код.

В любом случаеЯ нахожу сбивающим с толку то, как свойство на дедушке (корне) влияет на макет его дочернего элемента (iWantToBeBig), даже если макет дочернего элемента (mainContent) остается точно таким же.

Answer 1

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

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

Добавление высоты корневого элемента (например, его минимальной высоты) решает проблему.

Answer 2

Работает, посмотрите на пример кода https://stackblitz.com/edit/angular-qjrut7

Попробуйте поместить в пост все стили элемента mainContent из сторонней библиотеки.Это может быть что-то другое, вызывающее проблему