CODEWITHSUNDEEP
htmlcssflexbox
n1234
n1234

Reputation: 175

Flexbox - same height on all cards

I have a flexbox container with 3 cards, and I'm trying to work out how to get the cards to be the same height but I'm not having much success (tried changing direction flex-direction: column; which didn't work).

This needs to be IE11 friendly. Hopefully I'm going along the right lines with what I have at the moment (total novice in the CSS world).

Codepen: https://codepen.io/neilem/pen/dejmRQ

#container {
  background-color: white;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-around;
  padding: 5% 5%;
}

.card {
  text-align: center;
  border: 1px solid black;
  width: 31.33333%;
  margin: 1%;
}

#container>.card>.card-image>img {
  display: block;
  width: 100%;
}
<section id="container">
  <div class="card">
    <div class="card-image">
      <img src="http://www.stevensegallery.com/600/400" />
    </div>
    <div class="card-content">
      <h3 class="card-title">Title 1</h3>
      <p>Lorem ipsum dolor sit amet, per wisi movet ludus ea, ne quo quot viderer. Ius ex laudem feugait tractatos, sit sale mollis ut. Per vocent laoreet democritum no, cu pri sumo omnesque. Et accommodare intellegebat qui. Vix ne mundi primis.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-image">
      <img src="http://www.stevensegallery.com/600/400" />
    </div>
    <div class="card-content">
      <h3 class="card-title">Title 2</h3>
      <p>Lorem ipsum dolor sit amet, per wisi movet ludus ea, ne quo quot viderer. Ius ex laudem feugait tractatos</p>
    </div>
  </div>
  <div class="card">
    <div class="card-image">
      <img src="http://www.stevensegallery.com/600/400" />
    </div>
    <div class="card-content">
      <h3 class="card-title">Title 3</h3>
      <p>Lorem ipsum dolor sit amet, per wisi movet ludus ea</p>
    </div>
  </div>
</section>

Upvotes: 3

Views: 6364

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371341

An initial setting of a flex container is align-items: stretch. That's what creates the equal height columns feature.

In your code, you are overriding that default with align-items: flex-start. Just get rid of it.

#container {
  background-color: white;
  display: flex;
}

.card {
  flex: 1 0 30%;
  text-align: center;
  border: 1px solid black;
  margin: 1%;
}

#container > .card > .card-image > img {
  width: 100%;
}
<section id="container">
  <div class="card">
    <div class="card-image">
      <img src="http://www.stevensegallery.com/600/400" />
    </div>
    <div class="card-content">
      <h3 class="card-title">Title 1</h3>
      <p>Lorem ipsum dolor sit amet, per wisi movet ludus ea, ne quo quot viderer. Ius ex laudem feugait tractatos, sit sale mollis ut. Per vocent laoreet democritum no, cu pri sumo omnesque. Et accommodare intellegebat qui. Vix ne mundi primis.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-image">
      <img src="http://www.stevensegallery.com/600/400" />
    </div>
    <div class="card-content">
      <h3 class="card-title">Title 2</h3>
      <p>Lorem ipsum dolor sit amet, per wisi movet ludus ea, ne quo quot viderer. Ius ex laudem feugait tractatos</p>
    </div>
  </div>
  <div class="card">
    <div class="card-image">
      <img src="http://www.stevensegallery.com/600/400" />
    </div>
    <div class="card-content">
      <h3 class="card-title">Title 3</h3>
      <p>Lorem ipsum dolor sit amet, per wisi movet ludus ea</p>
    </div>
  </div>
</section>

revised codepen

Tested in Chrome, Firefox, Edge and IE11.

Upvotes: 7

Stephen Thomas
Stephen Thomas

Reputation: 14053

It's not clear to me exactly what you want, but if the intent is to make all the cards the same (full) height, just change the container

align-items: flex-start;

to

align-items: stretch;

IE11 has a ton of bugs with flexbox, so you'll probably want to verify that nothing in your content triggers any.

Upvotes: 1

Related Questions