必须显式设min-width: 0，因flex子项默认min-width: auto（等价于内容最小宽度），会阻止收缩；加min-width: 0才能覆盖该默认值，使flex-shrink生效，并配合width/max-width等才真正起效。
flex子项不收缩？必须显式设 min-width: 0
Flex容器里子元素默认有 min-width: auto，实际表现是“内容最小宽度”，不是 0。哪怕你写了 width: 50%，只要内容一长（比如一段长文本或图片），它就撑开父容器，响应式失效。
解决办法很简单：给子项加 min-width: 0，再配具体值或百分比：
-
min-width: 0是破局前提，否则其他 min-width 值可能被忽略 - 之后可设
min-width: 240px或min-width: 30%，真正起效 - 别只写
min-width: 100%——若父容器没明确宽度，百分比无参照，直接无效
表格列宽防压缩：第一行 <th> 或 <code><col> 才管用
table-layout: fixed 下，min-width 在后续 <td> 里基本没用。浏览器只读第一行的宽度约束，后面单元格全按它来分列。
<p>想让某列“最小不小于 120px”，必须：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件"><img
src="https://img.php.cn/upload/manual/000/000/010/170901721079108.gif" alt="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="overflowclass">使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件</a>
<p class="overflowclass">如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更</p>
</div>
<a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul><li>在第一行对应 <code><th> 上写 <code>min-width: 120px
<col style="width: 120px"> 直接定义列宽<td> 里设 <code>min-width，它不会参与计算
响应式卡片/容器：用 min-width + max-width + width: 100% 组合
单写 min-width: 320px 容易导致小屏横向滚动；单写 width: 100% 又可能在窄屏下压扁内容。三者配合才稳：
-
min-width: 320px防坍塌（保证按钮、文字可读） -
max-width: 600px防拉伸（避免大屏下单行文字过长） -
width: 100%让它在区间内弹性伸缩 - 注意：
min-width永远优先于width，所以width: 300px; min-width: 400px最终宽就是 400px
用 vw 或百分比设 min-width 时，小心文字截断
min-width: 20vw 在 iPhone SE（CSS 像素宽 375）上只有约 75px，一个中文字符就占 16–20px，两三个字就换行或溢出——这不是 bug，是单位特性。
真要防坍塌，得结合内容预期：
- 按钮文字最少要容纳 “加载中…” → 算 6 字 × 16px ≈ 96px，设
min-width: 100px更靠谱 - 避免纯依赖
vw或%做最小宽度，尤其对文本类元素 - 可用
min-width: max-content让元素至少撑到最长一行，但注意可能溢出容器
min-width: 0 这个重置动作——它不炫技，但 flex/grid 里没它，后面所有宽度控制都容易失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
