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 div占用剩余的可用空间。到目前为止，一切正常。

我的问题是flexbox的孙子（这来自我的代码）无法获得其父代的高度。如果我正确理解，这是因为mainContent没有设置高度，而是设置了flex-basis。但是，我仍然不真正知道如何让iWanntToBeBig元素获得其父元素的整个高度，而又不会弄乱第三方代码。

编辑：我正确地更新了我的问题并更改了输入错误。

根元素具有最小高度，但没有设置height属性。我认为这是问题的根源。添加height属性可以解决此问题。我想知道是否有任何方法可以解决我的问题而不必修改根元素。

如果没有，我将不得不修改第三方代码。

无论如何，即使子项布局（mainContent）保持不变，我也感到困惑于祖父母（根）上的属性如何影响其子项（iWantToBeBig）的布局。

Answer 1

正在工作，请看示例代码 https://stackblitz.com/edit/angular-qjrut7

尝试将来自第三方库的mainContent元素的所有样式添加到帖子中。可能是导致问题的其他原因

Answer 2

不幸的是，问题出在根元素上。对于我来说，这意味着我必须解决第三方代码才能解决它。

根元素已指定最小高度，但未指定高度，这将正确布局其子级，但其子级将无法使用height：100％之类的属性。

在根元素上添加高度（例如，等于其最小高度）即可解决问题。

CSS：让Flex孙子填充其父级

2 个答案: