右栏用 flex: 1 和 min-width 即可，无需 calc() 或 width: 100%；二者功能独立，需父容器 display: flex；加 word-break: break-word 防长内容溢出；min-width 失效常因父容器未撑开或被其他样式覆盖。
右栏用 flex: 1 加 min-width 就行
别折腾 calc() 或 width: 100%，它们和最小宽度根本不是一码事。flex: 1 负责动态填满剩余空间，min-width 是独立约束，两者互不干扰，直接叠加生效。
- 父容器必须设
display: flex，否则flex: 1完全无效 - 右栏写
flex: 1; min-width: 300px——顺序无所谓，浏览器会同时应用 - 如果右栏内容含长英文、URL 或连续数字，加
word-break: break-word防溢出 - 避免在右栏里再写
width: 100%，它会和flex: 1冲突，导致自适应失效
为什么 min-width 有时不起作用
常见原因是父容器没撑开，或者右栏被其他样式“锁死”。min-width 不是魔法，它只在有空间可争时才起效。
- 检查父容器是否有明确宽度来源：比如
width: 100%、max-width或固定像素值；若父容器本身塌陷（如高度 auto 且子项 float），min-width就无从谈起 - 确认右栏没被
flex: none、flex: 0 0 auto或width覆盖，这些会切断弹性行为 - 某些 CSS 重置库会设
min-width: auto，显式覆盖掉你的min-width: 300px，用开发者工具查 computed 值最准
flex: 1 和 min-width 共存时的边界行为
当视口窄到连 min-width 都容不下时，布局不会崩溃，但会触发滚动或内容挤压——这是预期行为，不是 bug。
- 左栏固定宽（如
flex: 0 0 250px），右栏flex: 1; min-width: 300px，总最小宽度就是 550px - 若容器宽 flex-shrink: 0）
- 想让整体换行？那就该切响应式断点，用
@media (max-width: 550px) { flex-direction: column; }，而不是硬扛
min-width 必须配合左栏的 flex-shrink: 0 才稳。否则窄屏下左栏先缩，右栏的最小宽度就成摆设。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
