因为父元素设置了【display: flex】所以该父元素下所有的子元素都会默认加上【flex: 0 1 auto】。
其中 1 就是 flex 中的 flex-shrink 属性，表示开启元素的收缩功能，所以子元素宽度才会失效。

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

默认值：0 1 auto

值 描述
flex-grow 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis 项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
auto 与 1 1 auto 相同。
none 与 0 0 auto 相同。
initial 设置该属性为它的默认值，即为 0 1 auto。请参阅 initial。
inherit 从父元素继承该属性。请参阅 inherit。

解决方案

方案1

flex: 0 0 auto;
width: 200px;

方案2

flex: 0 0 200px;

方案3（推荐）

flex-shrink: 0;
width: 200px;

方案4

min-width: 200px;
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。