How to resize parent width on basis of child elements in CSS Flex column?

Question

I try to move additional elements into the next column with Flex, and it works as expected as well. However, the parent width does not resize as when additional elements are added. In the example below, the red border is the parent element, which is not expanding when the elements come in the next column.

.container {
    border: 3px solid red;
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: column;
    max-height: 170px;
    padding: 20px;
}
.child {
    background: blue;
  height: 50px;
  width: 50px;
  border: 3px solid green;
  color: white;
}

<div class="container">
  <div class="child">a</div>
  <div class="child">b</div>
  <div class="child">c</div>
  <div class="child">d</div>
  <div class="child">e</div>
  <div class="child">f</div>
  <div class="child">g</div>
  <div class="child">h</div>
  <div class="child">i</div>
</div>