如何在不定义wrapper尺寸时，将input宽度设为祖父容器的百分比？

我原本有如下HTML结构：

<div id="container" style="width: 1000px;">
    <input type="text" name="x" style="width: 80%;">
</div>

#container是固定宽度的块级元素，此时input的宽度能正常设为#container宽度的80%，没有问题。

后来我需要给input添加一个#wrapper，用来在input上方绝对定位内容，同时希望#wrapper能紧密包裹input且无额外间距，于是改成了下面的结构：

<div id="container" style="width: 1000px;">
    <div id="wrapper" style="display: inline-block; position: relative;">
        <input type="text" name="x" style="width: 80%;">
    </div>
</div>

这个结构确实能让wrapper紧密包裹input，但因为#wrapper未定义宽度，input的百分比宽度改为基于#wrapper计算，无法达到“占容器80%宽度”的预期效果。

请问如何修改，既能让input宽度保持为#container宽度的百分比，又不需要显式定义#wrapper的尺寸？

方案1：使用CSS容器查询（现代浏览器支持） #

利用CSS容器查询单位cqw（Container Query Width），直接让input的宽度基于#container的宽度计算，无需给wrapper设置任何尺寸，同时wrapper依然能紧密包裹input：

<div id="container" style="width: 1000px; container-type: inline-size;">
    <div id="wrapper" style="display: inline-block; position: relative;">
        <input type="text" name="x" style="width: 80cqw;">
    </div>
</div>

• container-type: inline-size：标记#container为容器查询的上下文
• 80cqw：表示input宽度为容器（#container）宽度的80%

这个方案无需修改wrapper的布局属性，完全满足“wrapper紧密包裹input、无需显式定义wrapper尺寸、input宽度基于container”的需求，目前主流现代浏览器均支持容器查询。

方案2：CSS变量兼容方案（适配老浏览器） #

通过在#container中定义CSS变量，让input直接引用容器的宽度值计算自身宽度，同样无需给wrapper设置尺寸：

<div id="container" style="width: 1000px; --container-width: 1000px;">
    <div id="wrapper" style="display: inline-block; position: relative;">
        <input type="text" name="x" style="width: calc(80% * var(--container-width));">
    </div>
</div>

如果#container的宽度是动态的（比如百分比），只需把变量值同步改为对应百分比即可，例如：

<div id="container" style="width: 80%; --container-width: 80%;">
    <div id="wrapper" style="display: inline-block; position: relative;">
        <input type="text" name="x" style="width: calc(80% * var(--container-width));">
    </div>
</div>

内容的提问来源于stack exchange，提问作者Karolis