如何让flex子元素的宽度等于其祖父级容器的100%？

解决方案 #

有两种不需要预先知道.target-width具体宽度的实现方案：

方案1：使用CSS容器查询（推荐，纯CSS实现）

CSS容器查询可以直接绑定到指定祖先容器的尺寸，不受直接父元素尺寸影响，是当前最适配该场景的实现方式：

1. 给最外层容器声明为查询容器

.target-width {
  container-type: inline-size;
  /* 保留你原有其他属性 */
}

2. 将目标元素的宽度设置为查询容器的100%宽度

.content {
  width: 100cqw;
  /* 保留你原有其他属性 */
}

100cqw等价于你声明的查询容器行向宽度的100%，后续.target-width宽度任意变化，.content都会自动同步适配。
当前该属性兼容性覆盖Chrome 105+、Firefox 110+、Safari 16+，适配绝大多数现代浏览器场景。

方案2：JavaScript兼容方案

如果需要兼容不支持容器查询的旧浏览器，可以通过ResizeObserver监听最外层容器的尺寸变化，同步赋值宽度：

const targetContainer = document.querySelector('.target-width')
const contentEl = document.querySelector('.content')

const resizeObserver = new ResizeObserver(entries => {
  contentEl.style.width = `${entries[0].contentRect.width}px`
})
resizeObserver.observe(targetContainer)

如果需要滚动时可以查看.content的完整宽度，给.scrollable保留overflow-x: auto属性即可。

内容的提问来源于stack exchange，提问作者Gergő Horváth