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

Вы просто должны согнуть родителя этих двух элементов.

* {
  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 2

Используйте вложенные гибкие контейнеры.

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

Answer 3

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