Unwanted content stretching in flex

Question

As you can see below, when Im using flex, the button is forced to take every height available which causes it to look weird. What would be the way out to keep it centered vertically and do not stretch?

.x {
  display: flex;
  justify-content: space-between;
}

.y {
  font-size: 66px;
}

.z {
  border: none;
  color: white;
  background: #333;
  border-radius: 50px;
}

<div class='x'>
  <div class='y'>
    HEYYYYYAAAA
  </div>
  <button class='z'>
    Click
  </button>
</div>

Answer 1

Try using this:

.x {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.y {
  font-size: 66px;
}

.z {
  border: none;
  color: white;
  background: #333;
  border-radius: 50px;
  height: 100%;
}

The important part here is:

align-items: center;

This sets the elements along the horizontal axis.

height: 100% isn't necessarily required, but it would do the trick if you didn't have align-items: center; set.