考虑使用flex-direction
读到你的问题时，首先想到的是flex-basis并不总是应用于width。
当flex-direction为row时，flex-basis控制宽度。
但当flex-direction为column时，flex-basis控制高度。
关键区别
以下是flex-basis与width/height之间的一些重要区别：
flex-basis仅适用于flex项目。不是flex项目的flex容器将忽略flex-basis，但可以使用width和height。
flex-basis仅在主轴上起作用。例如，如果在flex-direction: column中，需要使用width属性来水平调整大小。
flex-basis对绝对定位的flex项目没有影响。需要使用width和height属性。绝对定位的flex项目不参与flex布局。
通过使用flex属性，可以将三个属性flex-grow、flex-shrink和flex-basis组合成一个声明。使用width，同样的规则需要多行代码。
浏览器行为
在渲染方面，除非flex-basis为auto或content，否则flex-basis和width之间应该没有区别。
来自规范：
7.2.3. flex-basis属性
对于除auto和content之外的所有值，在水平书写模式下flex-basis的解析方式与width相同。
但是auto或content的影响可能非常小或根本没有。规范进一步说明：
auto
当在 flex 项上指定时，auto 关键字将主尺寸属性的值作为使用的 flex-basis 检索。如果该值本身是 auto，则使用的值为 content。
content
表示根据 flex 项的内容自动调整大小。
注意：此值未出现在 Flexible Box Layout 的初始版本中，因此某些旧实现将不支持它。可以通过使用 auto 和主尺寸（width 或 height）为 auto 来实现等效效果。
因此，根据规范，flex-basis 和 width 解析相同，除非 flex-basis 是 auto 或 content。在这种情况下，flex-basis 可以使用内容宽度（假设 width 属性也会使用）。
flex-shrink 因子
记住 flex 容器的初始设置非常重要。其中一些设置包括：
flex-direction: row - flex 项将水平对齐justify-content: flex-start - flex 项将在主轴上堆叠在行的开始处align-items: stretch - flex 项将扩展以覆盖容器的交叉尺寸flex-wrap: nowrap - flex 项被强制保持在单行中flex-shrink: 1 - 允许 flex 项缩小
请注意最后一个设置。
由于默认情况下允许 flex 项收缩（防止它们溢出容器），因此指定的 flex-basis / width / height 可能会被覆盖。
例如，flex-basis: 100px 或 width: 100px，再加上 flex-shrink: 1，不一定是 100 像素。
为了渲染指定的宽度 - 并保持其固定 - 您需要禁用收缩：
div {
width: 100px;
flex-shrink: 0;
}
或者
div {
flex-basis: 100px;
flex-shrink: 0;
}
或者，根据规范建议：
flex: 0 0 100px;
7.2. 灵活性的组成部分
建议作者使用 flex 的简写方式来控制灵活性，而不是直接使用其长属性，因为简写可以正确地重置任何未指定的组件以适应常见用途。
浏览器问题
一些浏览器在嵌套的 flex 容器中调整 flex 项目的大小时会出现问题。
在嵌套的 flex 容器中忽略 flex-basis，但 width 可以正常工作。
当使用 flex-basis 时，容器会忽略其子元素的尺寸，导致子元素溢出容器。但是使用 width 属性时，容器会考虑其子元素的尺寸并相应地扩展。
参考文献：
示例：
使用flex-basis和white-space: nowrap的Flex项目溢出inline-flex容器。使用width没有问题。
当渲染一个带有white-space: nowrap的兄弟元素时，似乎设置为inline-flex的Flex容器不能识别子元素上的flex-basis（尽管它可能只是一个未定义宽度的项目）。容器不会扩展以适应项目。
但是，当使用width属性而不是flex-basis时，容器将尊重其子元素的大小并相应地扩展。在IE11和Edge中不存在此问题。
参考文献：
示例：
flex-basis（和flex-grow）在表格元素上不起作用
参考文献：
当祖先容器是收缩到适合元素时，flex-basis在Chrome和Firefox中失败。 在Edge中，设置工作正常。
如上面链接中所示的示例，涉及position:absolute，使用float和inline-block也将呈现相同的错误输出（jsfiddle演示）。
影响IE 10和11的错误：
