html - 如何缩放具有最小和最大宽度的 flexbox 元素？

Question

我希望在 flexbox 中显示三个并排的框。外盒是蓝色的，内盒是红色的。红色框的最小宽度为 228px，最大宽度为 362px，宽度为 100%。我想要的是当窗口宽度为 362px 或更小时只显示红色框(蓝色框不可见)。只有当宽度大于 362px 后，我才会让蓝色框等量展开，使中间的红色框保持固定宽度 362px。

我附上了一个我认为应该有效的示例，但我观察到蓝色框和红色框都按比例增长，直到红色框为 362px，此时只有蓝色框展开。

<div style="display: flex; width: 100%; flex-flow: row nowrap;">
  <div style="height: 80px; width: 100%; background-color: blue;
          flex-basis: auto; flex-grow: 0;"></div>
  <div style="height: 80px; min-width: 228px; max-width: 362px; width: 100%;
          background-color: red; flex-basis: auto; flex-grow: 1;"></div>
  <div style="height: 80px; width: 100%; background-color: blue;
          flex-basis: auto; flex-grow: 0;"></div>
</div>

Answer 1

从蓝色框中移除 width:100% (罪魁祸首) 并向其添加 flex-grow:1 以便它们仅扩展当有剩余空间时:

.blue {
  background: blue;
  flex-grow: 1;
}

.red {
  height: 80px;
  min-width: 228px;
  max-width: 362px;
  width: 100%;
  background-color: red;
}

<div style="display: flex;">
  <div class="blue"></div>
  <div class="red"></div>
  <div class="blue"></div>
</div>