css - 嵌套的弹性项目没有被缩小。min-width:0 解决问题

Question

当弹性容器具有弹性项目时，即使声明了宽度，项目也会缩小。但是如果我将此弹性项目设为弹性容器，则此内部容器的固定宽度的弹性项目不会收缩。如果我添加 min- 问题将得到解决宽度：0 到内部容器。如果有人帮助我理解这种行为，我会非常友好。谢谢。

.flex-container {
  border: 2px solid red;
  height: 200px;
  padding: 10px;
  display: flex;
}

.flex-item1 {
  border: 2px solid black;
  padding: 10px;
  display: flex;
}

.flex-item2 {
  border: 2px solid black;
  padding: 10px;
  display: flex;
}

.nested-flex-item1 {
  border: 2px solid blue;
  width: 200px;
}

<div class="flex-container">
  <div class="flex-item1">
    <div class="nested-flex-item1">

    </div>
    <div class="nested-flex-item2">

    </div>
  </div>

  <div class="flex-item2">
    <div class="nested-flex-item1">

    </div>
  </div>
</div>

标签： cssflexboxnested