How do I make the contents of a flex layout fill the parent?-CodePudding

So I am trying to create a flex layout where the children fill the vertical space of the parent.

I have attempted this here:

What am I missing to make this work?

CodePudding user response：

You need to explicitly set the display property on your vLayout class by adding: display: flex;

.vLayout {
  display: flex;
  background-color: #ff0000;
  position: absolute;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: stretch;
  align-content: stretch;
  gap: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: 10px;
}

.vLayout>* {
  flex: 1 100%;
}

.hLayout {
  background-color: #ffff00;
  margin: 10px;
  flex-grow: 1;
}

<body>
  <div class="vLayout">
    <div class="hLayout">
      x
    </div>
    <div class="hLayout">
      x
    </div>
  </div>
</body>