实时金价应用中flex项目宽度不匹配问题及修复

• 核心触发点为flex布局的默认min-width: auto规则：所有flex容器的直接子元素（flex项目）默认无法被缩小到比自身内容的最小宽度更小的尺寸。
• 当前三个模块的左侧标签文本长度不一致，导致左侧设置flex:1的元素实际被撑开的宽度不统一，占用的空间占比不同，最终让右侧设置flex:3的容器（货币选择框、盎司价格块、Karat列表）宽度出现偏差。
• Karat列表项本身为块级div，默认会撑满父容器.list的宽度，只要对齐.list与前两个右侧容器的宽度，列表项会自动保持尺寸统一。

• 给所有flex容器的直接子元素添加min-width: 0，取消默认的最小宽度限制，让flex的比例分配完全生效，新增代码如下：

.select-container > *,
.oz > *,
.gram > * {
    min-width: 0;
}

• 可选：若需要强制锁定右侧容器宽度，可直接给三个右侧容器统一设置宽度规则：

#currency,
.oz-price,
.gram > .list {
    width: 75%;
}

内容的提问来源于stack exchange，提问作者Samantha Rocker