Equal width flex items regardless of content length [duplicate]

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>

Answer 1

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