Width css property is not apply in items inside flex parent

I am new in CSS and I want the buttons to be wider, they look very narrow, how can I achieve this? They should look like the container has no display flex

.container {
  display: flex;
  max-width: 300px;
  overflow-y: auto;
}

.container button {
  width: 500px
}

<div class="container">
  <button>Button #0</button>
  <button>Button #1</button>
  <button>Button #2</button>
  <button>Button #3</button>
  <button>Button #4</button>
  <button>Button #5</button>
</div>

>Solution :

you have to use flex-shrink: 0 in button CSS.

.container {
  display: flex;
  max-width: 300px;
  overflow-y: auto;
}

.container button {
  width: 500px;
  flex-shrink: 0;
}