考虑flex-direction
阅读您的问题时首先想到的是flex-basis 并不总是适用于width。
当flex-direction 为row 时，flex-basis 控制宽度。
但是当flex-direction 是column 时，flex-basis 控制高度。
主要区别
以下是flex-basis 和width / height 之间的一些重要区别：
flex-basis 仅适用于弹性项目。 Flex 容器（也不是 flex 项）将忽略 flex-basis，但可以使用 width 和 height。
flex-basis 仅适用于主轴。例如，如果您在 flex-direction: column 中，则需要 width 属性来水平调整弹性项目的大小。
flex-basis 对绝对定位的弹性项目没有影响。 width 和 height 属性是必需的。 Absolutely-positioned flex items do not participate in flex layout.
通过使用flex 属性，可以将三个属性——flex-grow、flex-shrink 和flex-basis——巧妙地组合成一个声明。使用width，同样的规则需要多行代码。
浏览器行为
就它们的渲染方式而言，flex-basis 和width 之间应该没有区别，除非flex-basis 是auto 或content。
来自规范：
7.2.3. The flex-basis property
对于除auto 和content 之外的所有值，flex-basis 在水平书写模式下的解析方式与width 相同。
但auto 或content 的影响可能很小或根本没有影响。更多来自规范：
auto
当在弹性项目上指定时，auto 关键字检索值
的主要尺寸属性作为使用的flex-basis。如果该值为
本身auto，则使用值为content。
content
表示根据弹性项目的内容自动调整大小。
注意：该值在 Flexible 的初始版本中不存在
Box Layout，因此一些较旧的实现将不支持它。
使用auto 和一个
auto 的主要尺寸（width 或 height）。
因此，根据规范，flex-basis 和 width 解析相同，除非 flex-basis 是 auto 或 content。在这种情况下，flex-basis 可能会使用内容宽度（据推测，width 属性也会使用）。
flex-shrink 因素
记住弹性容器的初始设置很重要。其中一些设置包括：
-
flex-direction: row - 弹性项目将水平对齐
-
justify-content: flex-start - 弹性项目将堆叠在主轴线的开头
-
align-items: stretch - 弹性项目将扩展以覆盖容器的交叉大小
-
flex-wrap: nowrap - 弹性项目被强制保留在一行中
-
flex-shrink: 1 - 允许收缩的弹性项目
注意最后的设置。
因为弹性项目默认允许收缩（防止它们溢出容器），所以指定的flex-basis / width / height 可能会被覆盖。
例如flex-basis: 100px或width: 100px，加上flex-shrink: 1，不一定是100px。
要渲染指定的宽度——并保持固定——你需要禁用收缩：
div {
width: 100px;
flex-shrink: 0;
}
或
div {
flex-basis: 100px;
flex-shrink: 0;
}
或者，按照规范的建议：
flex: 0 0 100px; /* don't grow, don't shrink, stay fixed at 100px */
7.2. Components of
Flexibility
鼓励作者使用flex 简写来控制灵活性
而不是直接使用它的速记属性，作为速记
正确重置任何未指定的组件以适应 common
uses。
浏览器错误
某些浏览器在调整嵌套弹性容器中弹性项目的大小时遇到问题。
flex-basis 在嵌套的弹性容器中被忽略。 width 有效。
使用flex-basis 时，容器会忽略其子级的大小，子级会溢出容器。但是使用width 属性，容器会尊重其子级的大小并相应地扩展。
参考资料：
例子：
使用flex-basis 和white-space: nowrap 的弹性项目溢出inline-flex 容器。 width 有效。
似乎设置为inline-flex 的弹性容器在使用white-space: nowrap 渲染同级时无法识别子级上的flex-basis（尽管它可能只是宽度未定义的项目）。容器不会扩展以容纳项目。
但是当使用width 属性而不是flex-basis 时，容器会尊重其子级的大小并相应地扩展。这在 IE11 和 Edge 中不是问题。
参考资料：
例子：
flex-basis（和flex-grow）不适用于表格元素
参考资料：
当祖父容器是收缩以适应元素时，flex-basis 在 Chrome 和 Firefox 中失败。该设置在 Edge 中运行良好。
就像上面链接中的示例一样，涉及position: absolute，使用float 和inline-block，也会呈现相同的有缺陷的输出（jsfiddle demo）。
影响 IE 10 和 11 的错误：