Why won't my flex-item input and buttons fit the parent container?

Question

So I was learning Flex the other day and tried to make a reusable cart component – with a text input and two button controls on both sides of it.

I want it to be flexible. Meaning wherever I put this component it will fill 100% width of its parent container. This doesn't work though as you can see in the snippet.

Can somebody please explain why and how to fix this? Thank you so much.

.component {
  display: flex;
  min-height: 35px;
  align-content: stretch;
}

.component button {
  border: 0;
  background: #aaa;
  color: #ddd;
  min-width: 35px;
}

.component input {
  flex-grow: 1;
  border: 0;
  padding: 0 1rem;
  background: #ccc;
}

main {
  overflow: hidden;
}

<p>Simply not enough space…</p>

<main style="max-width: 150px">
  <div class="component">
    <button type="button">&laquo;</button>
    <input placeholder="Type quantity">
    <button type="button">&raquo;</button>
  </div>
</main>

<p>Here it still doesn't fit…</p>

<main style="max-width: 200px">
  <div class="component">
    <button type="button">&laquo;</button>
    <input placeholder="Type quantity">
    <button type="button">&raquo;</button>
  </div>
</main>

<p>Here it has enough space so it fits…</p>

<main style="max-width: 300px">
  <div class="component">
    <button type="button">&laquo;</button>
    <input placeholder="Type quantity">
    <button type="button">&raquo;</button>
  </div>
</main>