Html 子对象的弹性子对象未扩展到100%

在CSS中，如果子对象的子对象设置为

width:100%

，并且包装div设置了

display:flex

，则内容不会扩展到100%，它只使用内容的空间

如何让它扩展到孙子设置的大小，但仍然使用flex

flex grow可能不是答案，因为它总是会扩展以占用全部空间，而不考虑孙辈自己设置的大小

请参见以下示例：

.wrapperFlex、.wrapperBlock{
边框：1px纯银；
}
.wrapperFlex{
显示器：flex；
}
一级{
}
.levelOneGrow{
柔性生长：1；
}
.levelTwo、.levelTwo全宽{
颜色：白色；
背景颜色：蓝色；
}
.LevelTwo全宽{
宽度：100%；
}
.LevelOne直通车{
显示：内容；
}

之前
包装柔性
之后


之前
包装柔性生长
之后


之前
包装柔性传递
之后

您能为孩子设置弹性基础吗

.wrapperFlex、.wrapperBlock{
边框：1px纯银；
}
.wrapperFlex{
显示器：flex；
}
.包装块{
显示：块；
}
一级{
弹性基准：100%；/*将弹性基准设置为100%*/
}
.二级{
颜色：白色；
宽度：100%；
背景颜色：蓝色；
}

包装柔性


包装块

您能为孩子设置弹性基础吗

.wrapperFlex、.wrapperBlock{
边框：1px纯银；
}
.wrapperFlex{
显示器：flex；
}
.包装块{
显示：块；
}
一级{
弹性基准：100%；/*将弹性基准设置为100%*/
}
.二级{
颜色：白色；
宽度：100%；
背景颜色：蓝色；
}

包装柔性


包装块

set.levelOne{width:100%}，如果我没有误解您。

set.levelOne{width:100%}，如果我没有误解您。

您需要将flex属性作为一个属性添加到子级，即

levelOne

如下

flex:1。
当您在这里检查时，它将正常工作


.wrapperFlex、.wrapperBlock{
边框：1px纯银；
}
.wrapperFlex{
显示器：flex；
}
.包装块{
显示：块；
}
一级{
弹性：1；
}
.二级{
颜色：白色；
宽度：100%；
背景颜色：蓝色；
}

包装柔性


包装块
您需要将flex属性作为一个属性添加到子级，即
levelOne
如下
flex:1。
当您在这里检查时，它将正常工作


.wrapperFlex、.wrapperBlock{
边框：1px纯银；
}
.wrapperFlex{
显示器：flex；
}
.包装块{
显示：块；
}
一级{
弹性：1；
}
.二级{
颜色：白色；
宽度：100%；
背景颜色：蓝色；
}

包装柔性


包装块
孙子不自行设置宽度，当您输入
100%
时，它意味着采用父级的全宽，并且由于父级（
levelOne
）不采用其父级的全宽，因此它及其子级不会扩展到可用的全宽。你必须设置
.levelOne{flex grow:1；}
才能工作。@GhassenLouhaichi这不起作用，我用一个例子更新了这个问题，“WRAPPER flex grow”和“WRAPPER flex PASSTHROUGH”的例子看起来是一样的，你认为后者是你想要的，所以我有点困惑，为什么你认为
flex-grow
不是你想要的。@GhassenLouhaichi它们在视觉上是相同的，但它们不一样。Passthrough实际上就是这样，它使用display:contents冒泡宽度，在grow示例中，孙子没有100%的宽度，因此如果我理解正确（如果我没有理解，请纠正我），您希望通过执行
.grant{width:100%；}
而不是
.child{flex grow:1；}来实现相同的期望行为
。这是真的吗？如果是这样的话，如果他们都在做同一件事，为什么会如此重要呢？当你输入
100%
时，“孙子”不会自行设置宽度，这意味着取父对象的全宽，而且由于父对象（
levelOne
）没有取其父对象的全宽，然后，它及其子对象不会扩展到全部可用宽度。你必须设置
.levelOne{flex grow:1；}
才能工作。@GhassenLouhaichi这不起作用，我用一个例子更新了这个问题，“WRAPPER flex grow”和“WRAPPER flex PASSTHROUGH”的例子看起来是一样的，你认为后者是你想要的，所以我有点困惑，为什么你认为
flex-grow
不是你想要的。@GhassenLouhaichi它们在视觉上是相同的，但它们不一样。Passthrough实际上就是这样，它使用display:contents冒泡宽度，在grow示例中，孙子没有100%的宽度，因此如果我理解正确（如果我没有理解，请纠正我），您希望通过执行
.grant{width:100%；}
而不是
.child{flex grow:1；}来实现相同的期望行为
。这是真的吗？如果是的话，如果他们都在做同样的事情，为什么这么重要呢？我用更多的信息更新了这个问题，flex grow不是一个选项，我想我用更多的信息更新了这个问题，flex grow不是一个选项