CODEWITHSUNDEEP
htmlcssflexbox
chris56tv
chris56tv

Reputation: 167

How to set a row height in flex box?

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

Upvotes: 5

Views: 27293

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371003

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>

Upvotes: 2

Related Questions