CSS flex-direction: column Doesn't Shrinks Vertically

Question

I'm studying Flexbox and I can see flex-direction: row; shrinks item's width when resizing the window's width but it doesn't seems to behave the same for flex-direction: column; when resizing the window's height. Changing the direction to column and resizing the window's height items are not shrinking on their height when making the viewport shorter on its height. Why? I would expect Flexbox to flex not only when the viewport shortens on it's width but also when the viewport shortens on it's height.

.container {
  background-color: lemonchiffon;
  width: 100%;
  height: 300px;
  margin: auto;
  border: solid 5px red;
  display: flex;
  flex-direction: column;
}

.item {
  background-color: lightskyblue;
  width: 200px;
  height: 100px;
  color: white;
  text-align: center;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 2rem;
  border: solid 1px white;
}

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>