How to set a row height in flex box?

Question

How can I increase the height of a row in flex (the div that contains has the class "row")? I have one row with two columns.

.body2 {
  display: flex;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.blue-column {
  background-color: blue;
  height: 100px;
}

.green-column {
  background-color: green;
  height: 100px;
}

<section class="body2">

  <div class='row'>
    <div class='column'>
      <div class='blue-column'>
        Some Text in Column One
      </div>
    </div>
    <div class='column'>
      <div class='green-column'>
        Some Text in Column Two
      </div>
    </div>
  </div>

</section>

How can I increase the height of that row? I already tried height:something in .row but it doesn't work

Solution

If you set a height on the container, the height will apply to the container, but not necessarily to the content of the container, so it may not look like you've added height.

In this example, a height is added to the container, as illustrated with the red border:

.body2 {
  display: flex;
}

.row {
  display: flex;
  flex: 1;
  height: 150px;
  border: 1px dashed red;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.blue-column {
  background-color: aqua;
  height: 100px;
}

.green-column {
  background-color: lightgreen;
  height: 100px;
}

<section class="body2">
  <div class='row'>
    <div class='column'>
      <div class='blue-column'>
        Some Text in Column One
      </div>
    </div>
    <div class='column'>
      <div class='green-column'>
        Some Text in Column Two
      </div>
    </div>
  </div>
</section>

If you want to add height to the descendants, use height or flex-basis (since the nested flex container is in column-direction).

.body2 {
  display: flex;
}

.row {
  display: flex;
  flex: 1;
  height: 150px;
  border: 1px dashed red;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.blue-column {
  background-color: aqua;
  height: 75px;
}

.green-column {
  background-color: lightgreen;
  flex-basis: 125px;
}

<section class="body2">
  <div class='row'>
    <div class='column'>
      <div class='blue-column'>
        Some Text in Column One
      </div>
    </div>
    <div class='column'>
      <div class='green-column'>
        Some Text in Column Two
      </div>
    </div>
  </div>
</section>

If you want the descendants to take full height, use flex: 1 instead of an explicit height.

.body2 {
  display: flex;
}

.row {
  display: flex;
  flex: 1;
  height: 150px;
  border: 1px dashed red;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.blue-column {
  background-color: aqua;
  /* height: 75px; */
  flex: 1;
}

.green-column {
  background-color: lightgreen;
  /* flex-basis: 125px; */
  flex: 1;
}

<section class="body2">
  <div class='row'>
    <div class='column'>
      <div class='blue-column'>
        Some Text in Column One
      </div>
    </div>
    <div class='column'>
      <div class='green-column'>
        Some Text in Column Two
      </div>
    </div>
  </div>
</section>

Comments

[Yousaf]

you want to increase height of the div element with a class row?

[chris56tv]

yes, I have edited to specify that

[Yousaf]

just set the height property but keep in mind that setting the height of the div with class row won't increase the height of its child elements

[chris56tv]

as I mentioned in the post, I did try that but didn't work