html - Flexbox 子元素使用完整空间

Question

我正在用 flexbox 构建一个站点，但我遇到了一个无法解决的问题。

.min-h-screen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.parent {
  flex:1;
  background: red;
}

.child-one {
  background: green;
  display:flex;
}

.child-two {
  background: yellow;
}

<div class="min-h-screen">
  <div class="parent">
      <div class="child-one">
          <p>
           child 1
          </p>
      </div>

       <div class="child-two">
           <p>
           child 2
           </p>
      </div>
  </div>
</div>

我希望 child 1 和 child 2 使用整个空间，现在他们没有。我该如何解决这个问题。已经尝试了很多。 Height 100 % 不起作用。

Answer 1

使用嵌套的 flex 容器。

.min-h-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.parent {
  flex: 1;
  background: red;
  display: flex; /* new */
  flex-direction: column; /* new */
}

.child-one {
  flex: 1; /* new */
  background: green;
  display: flex;
}

.child-two {
  flex: 1; /* new */
  background: yellow;
}
 
body { margin: 0; }

<div class="min-h-screen">
  <div class="parent">
    <div class="child-one">
      <p>
        child 1
      </p>
    </div>
    <div class="child-two">
      <p>
        child 2
      </p>
    </div>
  </div>
</div>