关于flex

子元素即使设置了width，宽度也可能会发生变化

div#container { 
    display: flex; 
} 
.box { 
    width: 300px; 
}

默认情况下，width: 300px; 只是一个初始宽度

• 由于 display: flex; 使 #container 变成弹性容器，.box 元素会默认以 flex-grow: 0; flex-shrink: 1; flex-basis: auto; 的方式进行布局（除非手动设置 flex 相关属性）。

• width: 300px; 会被 flex-basis 影响，因为 flex-basis 的默认值是 auto，这意味着 .box 的宽度会优先参考 width 的值，但仍可能因 flex-grow 和 flex-shrink 发生变化。

• 当 flex-basis: auto; 时，width 的值会被用作 .box 的初始宽度。

也就是：

.box {
  width: 300px;
}

.box {
  flex-basis: auto; /* 继承 width: 300px */
  flex-grow: 0; /* 不会扩大 */
  flex-shrink: 1; /* 允许缩小 */
}