How can I make a same height flex blocks?

Question

I'm trying to make blocks of equal height, but for some reason I can't. What CSS property did I forget? I need the blocks in their row to be the same height, having different content inside (text, title, image, etc.)

My code:

.container {
  margin: 0 auto;
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
}

.block {
  width: 33.33333%;
  height: 100%;
  box-sizing: border-box;
  align-self: stretch;
  padding: 10px;
}

@media (max-width: 959px) {
  .block {
    width: 50%;
  }
}

@media (max-width: 599px) {
  .block {
    width: 100%;
  }
}

.card-1 {
  height: 100%;
  box-sizing: border-box;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #000000;
  background-color: #EEEEEE;
  border-radius: 10px;
  padding: 10px;
}

<div class="container">

  <div class="block">
    <div class="card-1">
      <div class="card-1__content">
        <h3 class="card-1__title">
          Text Text
        </h3>
        <p class="card-1__text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>
  </div>



  <div class="block">
    <div class="card-1">
      <div class="card-1__content">
        <h3 class="card-1__title">
          Text Text Text Text Text Text Text Text Text Text
        </h3>
        <p class="card-1__text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
          elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>
  </div>


  <div class="block">
    <div class="card-1">
      <div class="card-1__content">
        <h3 class="card-1__title">
          Text Text
        </h3>
        <p class="card-1__text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>
  </div>

</div>

I'm sure it can be done using Flexbox, without grid. What have I done wrong?