如何让子div的flex为1（填充剩余空间）的flex，让它的孩子全高[重复]答案

【问题标题】：How to have child div whose flex is 1 (fills remaining space) of a flex, have its children full height [duplicate]如何让子div的flex为1（填充剩余空间）的flex，让它的孩子全高[重复]
【发布时间】：2020-03-29 18:27:40
【问题描述】：

我一直坚持这一点，坦率地说，我什至不知道如何谷歌它，我所有的谷歌努力都是徒劳的。我的 HTML 如下：

<div class="uk-flex uk-flex-column uk-height-1-1">
    <!-- normal div with height 100vh and flexbox of flex column -->

    <div>div that will have height fit contents</div>

    <div class="uk-flex-1">
        <!-- div that will fill the remaining space -->

        <div class="uk-height-1-1">div that should fill the height of the parent</div>
    </div>

    <div>div that will have height fit content</div>
</div>

现在我的主要问题是让孙子 div (.uk-height-1-1) 让它的高度填充父级，我如何让它的高度填充父级 div 的高度？？

注意：以下问题的链接是我以前经历过的，他们没有回答我的问题

Fill remaining vertical space with CSS using display:flex

Make a div fill the height of the remaining screen space

更新：我使用uikit，我最初发布问题的方式是为了简化问题，uk-height-1-1 = height: 100%

【问题讨论】：

你能用你的css更新吗？您是否尝试将 class="viewport-height flex-column" 设置为 flex-direction 列？而你只是希望 flex-1 是全高的？
@ShrewdStyle 我发布了之前的问题只是为了简化，但我已经更新了它，看看，如果您需要更多说明，请告诉我
不要重复问题

标签： html css flexbox getuikit

【解决方案1】：

解决此类问题的最佳方法是在您尝试查看布局时为事物分配边框

.viewport-height {
  display: flex;
  border: 1px solid blue;
  height: 500px;
}
.flex-1 {
  border: 1px solid red;
}
.full-height {
  border: 1px solid greenyellow;
  height: 100%;
}

如果你查看上面的 CSS，.full-height 现在与 flex-1 的高度相同

【讨论】：

【解决方案2】：

如果我理解您的问题，那么这应该就是您要找的。如果您需要任何其他帮助，请告诉我。

.viewport-height {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.flex-1 {
  display: flex;
  flex: 1;
  background-color: green;
  align-items: center;
}

.div-with-height {
  height: 50px;
}

full-height {
  height: 100%;
}

<div class="viewport-height flex-column">
  <!-- normal div with height 100vh and flexbox of flex column -->

  <div class="div-with-height">div that will have height fit contents</div>

  <div class="flex-1">
    <!-- div that will fill the remaining space -->

    <div class="full-height">div that should fill the height of the parent</div>
  </div>

  <div class="div-with-height">div that will have height fit content</div>
</div>

【讨论】：