How to make my flexbox elements divide the total height of the container?

user_5357758 0
Viewed 52

I want the elements that are on the left to be distributed across the container's height, taking up 100% of the height in total.

enter image description here

How can I do it?

Note: "item" is dynamic data

.item {
  border: 1px solid gray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-6" style="border:1px solid red;">
    <div class="d-flex m-0">
      <div class="item">
        item
      </div>
    </div>
    <div class="d-flex m-0">
      <div class="item">
        item
      </div>
    </div>
  </div>
  <div class="col-6" style="border:1px solid red;">
    <div class="d-flex m-0">
      <div class="flex-center">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis libero incidunt rem nisi delectus aliquam maiores hic doloremque aliquid aut! Vitae ex architecto deserunt minima inventore ratione similique ipsa? Facere.
      </div>
      <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto enim officia itaque, quaerat quisquam deserunt, omnis quae, quas quod maxime at impedit ducimus vel aspernatur. Commodi unde amet itaque alias.
      </div>
    </div>
  </div>
</div>

View on JSFiddle

twitter-bootstrap css
2 Answers

You can use flex-direction: column, like so:

.left-column {
  display: flex;
  flex-direction: column;
}

.d-flex{
  border: 1px solid gray;
  flex: 1;
}

If you wish to align items vertically, you can add this:

.d-flex {
   ...
   align-items: center;

}

See it on this fiddle

user_15770580

So firstly you need the no-gutters class on your row to elimitate gutters between the cols. Then youll need h-50 on you flexbox elements inside the col (to get them 50% height each) and youll need w-100 on the flexbox childs (to make them fill the space). For the vertical centering inside the item just add d-flex align-items-center classes.

I created a updated version of your fiddle: https://jsfiddle.net/4vep1gy0/

.item {
  border: 1px solid gray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="row no-gutters">
  <div class="col-6" style="border:1px solid red;">
    <div class="d-flex m-0 h-50">
      <div class="item w-100 d-flex align-items-center">
        item
      </div>
    </div>
    <div class="d-flex m-0 h-50">
      <div class="item w-100 d-flex align-items-center">
        item
      </div>
    </div>
  </div>
  <div class="col-6" style="border:1px solid red;">
    <div class="d-flex m-0">
      <div class="flex-center">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis libero incidunt rem nisi delectus aliquam maiores hic doloremque aliquid aut! Vitae ex architecto deserunt minima inventore ratione similique ipsa? Facere.
      </div>
      <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto enim officia itaque, quaerat quisquam deserunt, omnis quae, quas quod maxime at impedit ducimus vel aspernatur. Commodi unde amet itaque alias.
      </div>
    </div>
  </div>
</div>

user_42180460
Related