右栏用flex: 1加min-width: 300px即可自适应且不窄于300px，无需calc()或JS；左栏必须用flex: 0 0 250px并配合box-sizing: border-box，否则会被压缩导致右栏宽度异常，还需处理长内容溢出和等高对齐问题。
右栏用 flex: 1 加 min-width 就够了
不用 calc()，也不用 JS 监听宽度——flex: 1 本身就能响应剩余空间，min-width 是它的天然搭档。只要父容器是 display: flex，右栏设 flex: 1 后再加 min-width: 300px（或你需要的值），它就会：撑满剩余空间，但绝不窄于 300px；窄屏下超出部分会触发横向滚动或内容换行，而不是压扁自己。
左栏必须写 flex: 0 0 250px，不能只写 width: 250px
只写 width: 250px 在 flex 容器里是危险的：默认 flex-shrink: 1，一旦父容器变窄或右栏内容撑大，左栏会被压缩，导致右栏实际可用宽度突变，min-width 就可能失效。
-
flex: 0 0 250px明确禁用伸缩（flex-grow: 0）、禁用收缩（flex-shrink: 0）、固定基础宽度（flex-basis: 250px） - 必须配合
box-sizing: border-box，否则 padding/border 会额外加宽，让右栏“以为”剩余空间比实际小 - 如果左栏有边框或内边距，250px 应该是包含它们的总宽，不是内容区宽
长英文/数字不换行？加 word-break: break-word
右栏即使设了 min-width 和 flex: 1，遇到 https://very-long-url-with-no-spaces.com 或连续数字串，依然会溢出、撑破布局——flex 不负责内容断行。
- 在右栏上加
word-break: break-word（或等价的overflow-wrap: break-word） - 如果右栏里还有表格，记得给
table加width: 100%和table-layout: fixed，否则表格按内容撑宽，min-width形同虚设 -
min-width: 0对某些嵌套 flex 容器里的子项有用，但对主右栏不是必需；它主要防“弹性项拒绝收缩”，而你这里要的是“不被压太窄”，所以min-width: 300px更直接
高度不对齐不是 bug，是没开 align-items: stretch
左栏高度常比右栏矮，不是布局失败——flex 默认 align-items: stretch 确实会让子项等高，但很多 CSS 重置库（如 normalize.css 或某些 UI 框架）会覆盖这个默认值，改成 align-items: flex-start。
立即学习“前端免费学习笔记（深入）”；
- 检查父容器 computed style 中的
align-items值，如果不是stretch，手动加上 - 不需要给左右栏都设
height: 100%，那反而容易因父容器高度未定义而失效 - 等高只作用于 flex 子项本身，不影响子项内部的内容流；若右栏内容少，左栏也不会被“拉空”，只是背景或边框看起来不连贯
min-width 都会表现异常。 
