如何创建用于包装和弯曲项目的FlexBox布局流畅但相等

Question

很抱歉，如果这是一个重复的问题；我确实搜索了很多，但是有很多FlexBox问题（这是一个令人困惑的话题！）。无论如何，我正在尝试创建水平行的框，框的尺寸必须最小，因此当一行中容纳的框太多时，它们会自动换行。这部分我已经完成。

问题是，两者似乎都不可能灵活放置弹性项目，以便它们填充父容器并且都保持相同的宽度在行之间。

#container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  flex: 1;
  min-width: 150px;
  border: 1px solid #ccc;
  background-color: #eee;
  margin: 12px;
  padding: 4px;
}

<div id="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
  <div class="box">Box 5</div>
</div>