我在用minmax CSS网格包装div时遇到问题

Question

为什么这2个div换行为300px？当元素达到minmax中的min值时，它们不应该换行吗？ 我尝试了自动调整和自动填充，但仍然无法正常工作。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 300px));
  width: 100%;
  height: 500px;
}
.item {
  height: 100px;
  background: blue;
  border: 1px solid black;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
</div>