Css 将柔性父交叉轴安装到项目

其中父级具有

显示：flex；弹性方向：列

，是否可以使父项的宽度扩展以适合比父项宽的弹性项目

---

值得注意的是，祖父母的没有

display:flex

也没有固定的宽度。它有一个

最小宽度：100%

。

在父对象上使用

内联flex

，而不是在祖辈对象上使用

flex

和

内联块应该可以做到这一点

示例B显示了修改。如果img比视口宽，则父对象和祖辈将容纳它（缩小窗口，使img比视口宽，然后向右滚动）


html，正文{
宽度：自动；
}
.祖父母{
宽度：300px；
背景颜色：蓝色；
填充：10px；
}
.家长{
显示：内联flex；
弯曲方向：立柱；
背景色：红色；
填充：10px；
}
.例祖父母{
最小宽度：100%；
宽度：自动；
显示：内联块；
}
例父母{
宽度：自动；
}



在父对象上使用
内联flex
，而不是在祖辈对象上使用
flex
和
内联块
，应该可以达到这个目的

示例B显示了修改。如果img比视口宽，则父对象和祖辈将容纳它（缩小窗口，使img比视口宽，然后向右滚动）


html，正文{
宽度：自动；
}
.祖父母{
宽度：300px；
背景颜色：蓝色；
填充：10px；
}
.家长{
显示：内联flex；
弯曲方向：立柱；
背景色：红色；
填充：10px；
}
.例祖父母{
最小宽度：100%；
宽度：自动；
显示：内联块；
}
例父母{
宽度：自动；
}



是的，您可以，通过使用
内联flex
而不是
flex
，它将随着孩子的成长而成长

使用
flex
时，flex父元素不会与其子元素一起增长的原因是
flex
的工作方式类似于块元素，并且块元素不会比其父元素（内联元素）增长得更大

这里可以看到，带有或不带
最小宽度：100%
的grand
父级
不会随着其内容而增长，但
内联flex会增长。如果
flex
元素具有
内联块
，也会出现这种情况

尽管如此，
父级
的内容仍会溢出并影响其周围环境，就像它会随着内容的增长而增长一样，并使外部滚动条显示出来

具有
min width
的
parent
稍宽的原因是
填充
未包含在其设置的宽度中，因此添加了
框大小：边框框将使它们的宽度相等

堆栈片段


.parent{
填充：20px；
背景：黄色；
}
.parent.with-min-width{
最小宽度：100%；
}
.flex{
显示：内联flex；
弯曲方向：立柱；
背景色：红色；
填充：20px；
}
.flex.项目{
宽度：800px；
填充：20px；
背景颜色：蓝色；
}
是的，您可以，通过使用
内联flex
而不是
flex
，它将随着孩子的成长而成长

使用
flex
时，flex父元素不会与其子元素一起增长的原因是
flex
的工作方式类似于块元素，并且块元素不会比其父元素（内联元素）增长得更大

这里可以看到，带有或不带
最小宽度：100%
的grand
父级
不会随着其内容而增长，但
内联flex会增长。如果
flex
元素具有
内联块
，也会出现这种情况

尽管如此，
父级
的内容仍会溢出并影响其周围环境，就像它会随着内容的增长而增长一样，并使外部滚动条显示出来

具有
min width
的
parent
稍宽的原因是
填充
未包含在其设置的宽度中，因此添加了
框大小：边框框将使它们的宽度相等

堆栈片段


.parent{
填充：20px；
背景：黄色；
}
.parent.with-min-width{
最小宽度：100%；
}
.flex{
显示：内联flex；
弯曲方向：立柱；
背景色：红色；
填充：20px；
}
.flex.项目{
宽度：800px；
填充：20px；
背景颜色：蓝色；
}

我更新了问题。祖父母有
最小宽度：100%
和
宽度：自动
。所以，如果
.parent
元素的所有父元素都不是固定宽度的，那么它应该可以按预期工作？我仍在尝试处理您所期望的内容。您有最小宽度为100%的祖父母；你想让父母来填补这个空缺？img宽度在哪里起作用？如果
不比窗口宽，则使用
祖父母的
最小宽度：100%
。如果
比窗口宽，则所有父对象都应扩展到图像的宽度。并且img不是自动宽度？在我的场景中，flex项目的响应内容可能超过窗口宽度。当这种情况发生时，所有父项（包括直接的flex父项）都应该扩展到与所述flex项相同的宽度。祖父母有
最小宽度：100%
和
宽度：自动
。所以，如果
.parent
元素的所有父元素都不是固定宽度的，那么它应该可以按预期工作？我仍在尝试处理您所期望的内容。你的祖父母患有心肌梗死