flex容器嵌套时max-width失效，根本原因是flex-shrink:1默认启用、min-width:auto未重置及flex-direction未显式声明；需逐层设置flex-shrink:0、min-width:0和明确flex-direction才能使max-width生效。
Flex容器的max-width在嵌套时“失效”，不是CSS bug，而是多层弹性行为叠加后，尺寸约束被默认值层层拦截的结果。关键不在max-width本身，而在它上游的flex-shrink、min-width和flex-basis是否被显式覆盖。
flex-shrink:1 是嵌套中 max-width 失效的头号原因
父Flex容器里一个display: flex子项，即使设了max-width: 300px，只要空间不足，就会被flex-shrink: 1（默认值）强行压缩——此时max-width根本没机会触发。
- 必须对**该子项**显式写
flex-shrink: 0，或用简写flex: 0 0 auto（flex-grow: 0、flex-shrink: 0、flex-basis: auto） - 只写
flex-shrink: 0还不够：如果元素本身有width，flex-basis会继承它，导致基准尺寸不稳定；建议统一用flex: 0 0 300px锁定基准 - 若同时开了
flex-grow: 1，它会优先抢占剩余空间，把max-width顶穿——检查是否误用了flex: 1
嵌套Flex子容器必须加 min-width: 0 才能收缩
当父Flex是flex-direction: row，其子容器又是一个display: flex（比如内部排按钮），这个子容器默认min-width: auto，会拒绝被压缩，哪怕你给它设了max-width，它仍按内容撑开整行。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 必须在**该子容器上**直接设置
min-width: 0（不是父容器，也不是孙子元素） - 如果子容器是
flex-direction: column，则需配min-height: 0来释放垂直方向收缩能力 - Chrome 默认给Flex项目加
min-width: auto，Firefox 则倾向min-width: 0，跨浏览器必须显式声明
overflow-wrap 和 white-space 不配合，max-width 形同虚设
max-width只管容器边界，不管内容是否溢出。一串无空格URL或base64字符串会直接撑破限制——这不是max-width失效，而是换行逻辑没打开。
- 对文本类子项，必须组合使用：
white-space: normal（允许空格处断行） +overflow-wrap: break-word（必要时断词） - 若要强制截断并显示省略号，还需
white-space: nowrap+overflow: hidden+text-overflow: ellipsis，但此时min-width: 0仍是前提 -
<pre class="brush:php;toolbar:false;"></pre>、<table>、<code><img>等特殊元素自带渲染规则：<pre class="brush:php;toolbar:false;"></pre>要改white-space: pre-wrap，<table>得设<code>table-layout: fixed嵌套层级多了，justify-content/align-items 作用轴容易搞反
内层Flex容器的
flex-direction不继承父级，默认仍是row。如果父层是column，子层却是row，那justify-content: center就变成了水平居中，而非你想要的垂直居中——看起来像max-width没起作用，其实是布局方向错乱导致尺寸计算异常。- 每层
display: flex都必须**单独声明**flex-direction，不能省略 -
justify-content永远作用于主轴，align-items永远作用于交叉轴；子层flex-direction: column时，二者作用方向与父层翻转 - 中间夹一层非Flex元素（比如普通
<div>），对齐链路就断了——<code>align-items只影响直接子项真正卡住
max-width的，从来不是它自己，而是上层Flex默认开启的收缩、未重置的最小尺寸、以及内容换行逻辑的缺失。嵌套越深，越要一层层检查flex-shrink、min-width、flex-direction这三处，漏掉任意一个，样式都会“看起来不听话”。
- 每层
