Flexbox自适应宽度问题：子元素占满父容器宽度方案咨询

方法1：Flex布局 + display: contents #

通过让两个子容器（fixed-div、config-div）不参与布局，直接让它们的子元素成为外层container的flex项，实现自适应平分宽度：

.container {
  display: flex;
  width: 100%;
}

.fixed-div, .config-div {
  display: contents; /* 消除当前容器的布局盒，子元素直接继承外层布局上下文 */
}

.container > div {
  flex: 1; /* 所有子元素平分容器宽度 */
  box-sizing: border-box; /* 避免边框/内边距撑开宽度 */
  border: 1px solid #eee; /* 可选：用于可视化布局 */
}

当可配置div存在时，4个子元素各占25%宽度；不存在时，3个子元素各占1/3宽度，均铺满container的全部宽度。

方法2：Grid布局 #

利用Grid的自动适配特性，同样结合display: contents让子元素直接参与外层Grid布局：

.container {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.fixed-div, .config-div {
  display: contents;
}

.container > div {
  box-sizing: border-box;
  border: 1px solid #eee;
}

Grid的repeat(auto-fit, minmax(0, 1fr))会根据子元素数量自动分配列宽，完美适配3个或4个子元素的场景。

关于你之前的问题 #

移除container的flex样式后，fixed-div和config-div默认是块级元素，会各自独占一行，它们的子元素只能在自身父容器内平分宽度，而非整个container的宽度。这就是为什么3个子元素时无法达到预期——此时子元素只铺满fixed-div的宽度，而fixed-div占满一行，看起来和铺满container类似，但本质逻辑错误；4个子元素时可能是你额外设置了样式让两个父容器并排，才出现“生效”的假象。

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