如何使子级的flex为flex的1（填充剩余空间），使其子级全高[duplicate]

Question

此问题已经在这里有了答案：

How to have child div of a flex, have its children full height [duplicate]

Percentage Height HTML 5/CSS（6个答案）

关闭昨天。

我一直坚持这一点，坦白说，我什至都不知道如何使用Google，因为我在Google上所做的所有努力都是徒劳的。我的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的高度，如何使它的高度填充父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%

Answer 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%;
}

如果您在.full-height上方的css中查找，现在与flex-1的高度相同

Answer 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>