How to give flex items 100% height?

Question

I have the following markup. The footer-info class has some styling that I'd like to be the same height inside each column, regardless of how much text is present.

I don't want to apply style to the column classes where possible, and I'd also prefer to avoid position relative/absolute for this if possible. Is there an elegant solution?

The outcome I want is for each footer-info to fill the height of the parent row (equal height columns).

I've put this in a jsfiddle: https://jsfiddle.net/ntxc305e/

.container-fluid {
  padding-right: 2rem;
  padding-left: 2rem;
  margin-left: auto;
  margin-right: auto;
}

.row {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -0.5rem;
  margin-left: -0.5rem;
}

.col-md {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  max-width: 100%;
}

.footer-info {
  background-color: rgba(36, 36, 36, 0.8);
  color: #f7f7ef;
  padding: 20px;
}

<div class="container-fluid">
  <div class="row">
    <div class="col-md">
      <div class="footer-info">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae sunt, vero, minima perspiciatis sit autem natus aspernatur labore pariatur dicta aut iure eum doloremque suscipit dolorum, temporibus reiciendis. Veniam, nostrum.
        </p>
      </div>
    </div>
    <div class="col-md">
      <div class="footer-info">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum recusandae qui accusamus similique explicabo mollitia quas, unde deserunt aperiam ipsam non distinctio totam officiis incidunt enim soluta odio saepe. Ullam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus suscipit voluptas nobis ad sit beatae, quaerat, harum reiciendis autem rerum est molestiae. Quisquam optio rerum consequuntur doloribus corporis suscipit aliquid!</p>
      </div>
    </div>
    <div class="col-md">
      <div class="footer-info">
        <p>Small column</p>
      </div>
    </div>
  </div>
</div>

Answer 1

With the jsfiddle example you posted, the solution is actually surprisingly simple! The row in your example is a flex container, and the col-md elements are his flex items. The important thing about flex items is, they fill the height of their container, which means that all your col-md items vertically fill the row and are thus of the same height already. At the same time your footer-info elements are always direct children of the col-md elements, which means the only thing you need to do is to set the height of the footer-info to 100% to fill their parents (col-md) height. I created a simplified example for you here:

.row {
  display: flex;
  justify-content: space-around;
}

.col-md {
  flex-basis: 30%;
}

.footer-info {
  box-sizing: border-box;
  background-color: rgba(36, 36, 36, 0.8);
  color: #f7f7ef;
  padding: 20px;
  height: 100%;
}

<div class="row">
  <div class="col-md">
    <div class="footer-info">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae sunt, vero, minima perspiciatis sit autem natus aspernatur labore pariatur dicta aut iure eum doloremque suscipit dolorum, temporibus reiciendis. Veniam, nostrum.
      </p>
    </div>
  </div>
  <div class="col-md">
    <div class="footer-info">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum recusandae qui accusamus similique
      </p>
    </div>
  </div>
  <div class="col-md">
    <div class="footer-info">
      <p>Small column</p>
    </div>
  </div>
</div>

Answer 2

Use nested flex containers to give the footers the full height of the row. Add this to your code:

.col-md {
  display: flex; /* new */
}

.footer-info {
  flex: 1; /* new */
}

revised demo

When you create a flex container, it automatically sets the children (the flex items) to align-self: stretch, which causes them to expand across the full length of the cross axis. In row-direction containers, the cross axis is vertical (i.e., height).

Answer 3

Just try this:

.footer-info {
    height: 100%;
    box-sizing: border-box;
}

For the box-sizing follow this link https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing