不能用 calc() + vw 实现父容器相对宽度，因为 vw 基于视口而非父容器；真正响应父宽的是 width: 100%、flex: 1（flex-basis: 0）和 grid fr 单位；CSS 变量仅作静态系数，需配合 JS 或媒体查询才能动态控制比例。
直接用 calc() + vw 不行，因为 vw 是视口单位，不是父容器单位
很多人第一反应是写 width: calc(var(--ratio) * 1vw)，但这是错的——vw 基于整个视口宽度，和父容器毫无关系。CSS变量本身不参与计算上下文，它只是静态值替换，无法感知父级尺寸。所以不能靠变量“自动读取父宽”。
width: 100% 或 flex: 1 才是真·父容器相对单位
真正能响应父容器宽度的，只有原生布局机制：
-
width: 100%：块级子元素默认行为，前提是父容器有明确宽度（比如width: 100%或max-width+width: 100%） -
flex: 1：在display: flex父容器中，子项用flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0）才能均分剩余空间 -
grid的fr单位：比如grid-template-columns: 1fr 2fr，比例基于网格容器可用宽度
这些方式都不依赖 CSS 变量，但它们才是浏览器真正理解的“父容器相对”逻辑。
想用变量控制比例？只能配合 JS 动态注入或预设断点
如果非要用 CSS 变量表达“父宽的 60%”，目前只有两种现实路径：
立即学习“前端免费学习笔记（深入）”；
-
JS 注入：监听父容器
resize，用getBoundingClientRect().width算出当前宽度，再通过element.style.setProperty('--parent-width', w + 'px')写入变量，然后用calc(var(--parent-width) * 0.6) -
媒体查询预设：按常见断点定义变量，比如
@media (min-width: 768px) { :root { --ratio: 0.75; } }，再结合width: calc(100% * var(--ratio))——但这是静态比例，不随父容器实时变化
注意：calc(100% * var(--ratio)) 中的 100% 是相对于父容器的，这才是关键；变量只提供乘数，不提供基准。
为什么 flex-basis: 0 比 flex-basis: 100% 更适合自适应
这是最容易被忽略的细节：
-
flex-basis: 100%让子项初始就占满父容器，没“剩余空间”，flex-grow完全失效 -
flex-basis: 0（即flex: 1的默认行为）把起点归零，所有空间都交给flex-grow分配，才能真正响应兄弟元素增减或父容器缩放 - 尤其当父容器是
max-width限制时，flex-basis: 0能保证子项始终按比例撑满可用宽度，而不是卡死在某个固定像素值上
变量在这里只能当开关或系数用，真正的自适应锚点永远在布局模型本身——不是变量，而是 flex、grid 或百分比的计算上下文。
