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

.parent { 
     min-height: 100vh;
     display:flex;
     background: red;
     flex-direction: column; 
 }

.child-one {
     background: green; 
     flex: 1 0 50%; 
}

.child-two { 
     background: yellow; 
     flex: 1 0 50%; 
 }

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

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

Answer 2

你也必须弯曲这两个元素的父元素。

* {
  margin: 0;
}

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

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

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

.child-two {
  background: yellow;
  flex: 1;
}

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

Answer 3

使用嵌套的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>