Chatbox component - Flex item with scrollable content

Question

I'm building a simple chat component similar to the below.

To tackle this I'm using flexbox and in doing so I've come across a small issue which I did manage to solve, however I am not sure how it works and whether there are other ways to go about it.

Basically the container wrapping the list (.list-wrapper) has the flex property set to 1 so that it takes all the available space and the list (.list) has a height of 100%.

Having only the properties described above resulted in the overflowing content to still being shown and the scroll not being displayed. The only way I seemed to solve it is by setting some type of fixed height to the .list-wrapper, in my example I set it using height: 1px.

My understanding is that somehow the height is acting like a min-height and then the flex: 1 takes over and therefore takes the rest of the space. The scroll is obviously shown since the height of the div is set to 1px and therefore an overflow is always present.

I know I managed to solve it, but I'm curious as to why it works and whether there are any other ways to do this.

.content {
  border: 1px solid tomato;
  display: flex;
  flex-direction: column;
  height: 75vh;
}

.list-wrapper {
  border: 2px solid #bada55;
  flex: 1;
  height: 1px;
}

.list-item {
  padding: 10px;
  border: 1px solid blue
}

.list {
  height: 100%;
  overflow-y: auto;
}

<div class="content">
  <h2>My Header</h2>
  <div class="list-wrapper">
    <div class="list">
      <div class="list-item">My List Item 1</div>
      <div class="list-item">My List Item 2</div>
      <div class="list-item">My List Item 3</div>
      <div class="list-item">My List Item 4</div>
      <div class="list-item">My List Item 5</div>
      <div class="list-item">My List Item 6</div>
      <div class="list-item">My List Item 7</div>
      <div class="list-item">My List Item 8</div>
      <div class="list-item">My List Item 9</div>
      <div class="list-item">My List Item 10</div>
    </div>
  </div>
  <div class="add-new">
    <button>Add</button>
  </div>
</div>