Equal width flex items regardless of content length

Question

The flexboxes in my code below look fantastic, but I am confused how the box widths are determined.

For instance, if you delete what is written in the <p> or class="card_title" elements, the size of the box also changes.

Is there a way to set all the boxes to be the same width regardless of the lengths of the titles or paragraphs?

codepen demo

img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}
.btn {
  background-color: white;
  border: 1px solid #cccccc;
  color: #696969;
  padding: 0.5rem;
  text-transform: uppercase;
}
.btn--block {
  display: block;
  width: 100%;
}
.cards {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cards__item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 1rem;
}
@media (min-width: 40rem) {
  .cards__item {
    width: 50%;
  }
}
@media (min-width: 56rem) {
  .cards__item {
    width: 33.3333%;
  }
}
.card {
  background-color: white;
  border-radius: 0.25rem;
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
}
.card:hover .card__image {
  -webkit-filter: contrast(100%);
  filter: contrast(100%);
}
.card__content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 1rem;
}
.card__image {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  -webkit-filter: contrast(70%);
  filter: contrast(70%);
  overflow: hidden;
  position: relative;
  -webkit-transition: -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
  transition: -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
  transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
  transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91), -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
}
.card__image::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
@media (min-width: 40rem) {
  .card__image::before {
    padding-top: 66.6%;
  }
}
.card__image--wedding {
  background-image: url(wedding2.png);
}
.card__image--baby {
  background-image: url(baby2.png);
}
.card__image--moving {
  background-image: url(moving2.png);
}
.card__image--graduation {
  background-image: url(graduation2.png);
}
.card__image--retirement {
  background-image: url(retirement2.png);
}
.card__image--award {
  background-image: url(trophy2.png);
}
.card__title {
  color: #696969;
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.card__text {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

<div class="life_events">
  <hr class="section-heading-spacer"></hr>
  <div class="clearfix"></div>
  <h2 class="section-heading">Moments That Matter</h2>
  <ul class="cards">
    <li class="cards__item">
      <div class="card">
        <div class="card__image card__image--wedding"></div>
        <div class="card__content">
          <div class="card__title">Getting Married</div>
          <p class="card__text"></p>
          <button class="btn btn--block card__btn">Let's Go</button>
        </div>
      </div>
    </li>
    <li class="cards__item">
      <div class="card">
        <div class="card__image card__image--baby"></div>
        <div class="card__content">
          <div class="card__title">Growing Your Family</div>
          <p class="card__text"></p>
          <button class="btn btn--block card__btn">Let's Go</button>
        </div>
      </div>
    </li>
    <li class="cards__item">
      <div class="card">
        <div class="card__image card__image--moving"></div>
        <div class="card__content">
          <div class="card__title">Moving to a New Home</div>
          <p class="card__text"></p>
          <button class="btn btn--block card__btn">Let's Go</button>
        </div>
      </div>
    </li>
    <li class="cards__item">
      <div class="card">
        <div class="card__image card__image--graduation"></div>
        <div class="card__content">
          <div class="card__title">Requesting Tuition Reimbursement</div>
          <p class="card__text"></p>
          <button class="btn btn--block card__btn">Let's Go</button>
        </div>
      </div>
    </li>
    <li class="cards__item">
      <div class="card">
        <div class="card__image card__image--retirement"></div>
        <div class="card__content">
          <div class="card__title">Preparing for Retirement/Separation</div>
          <p class="card__text"></p>
          <button class="btn btn--block card__btn">Let's Go</button>
        </div>
      </div>
    </li>
    <li class="cards__item">
      <div class="card">
        <div class="card__image card__image--award"></div>
        <div class="card__content">
          <div class="card__title">Awarding an Employee</div>
          <p class="card__text"></p>
          <button class="btn btn--block card__btn">Let's Go</button>
        </div>
      </div>
    </li>
  </ul>
</div>

Michael Benjamin · Accepted Answer · 2017-11-09T17:35:50.767

11

Is there a way to set all the boxes to be the same width regardless of the lengths of the titles or paragraphs?

You currently have no defined width on your card elements. This means the width of each element will be set by its content (.card_image, .card_content. .card_title, etc.).

If you want the width of these elements to be uniform and fixed, then give them a width. Try this:

.card { flex: 0 0 100%; } /* don't grow, don't shrink, take full width of parent */

revised codepen

edited Nov 09 '17 at 17:35

answered Nov 01 '16 at 02:10

Michael Benjamin

346,931
104
581
701

amazing, thanks so much! I have a follow up question to this, at full width this definitely fixed the problem. However I noticed when I start shrinking the browser window, the width sizing issue reappears. What element would I have to change to fix the responsiveness of those boxes? – Dave Nov 01 '16 at 22:32
There are several media queries in your code defining a width for `.cards__item`, the parent of `.card`. On screen width 56rem+, `.cards__item` has `width: 33.3333%`. As the screen re-sizes smaller, a media query for screen width 40rem+ kicks in, adjusting the element to `width: 50%`. This is all good because the child (`.card`) is set in my answer to take 100% of the parent width. – Michael Benjamin Nov 02 '16 at 01:35
However, when the screen size gets even smaller, there is no width defined for `cards__item`, so our answer doesn't work. You need to define a width for this element. [**revised codepen**](http://codepen.io/anon/pen/ORKRjG?editors=1100) – Michael Benjamin Nov 02 '16 at 01:39
1

can't thank you enough. I'm still trying to wrap my head around this code, but this certainly clears up a lot. thanks again. – Dave Nov 02 '16 at 17:23

Equal width flex items regardless of content length

1 Answers1