Html 元素在div中不是100%宽度

我有一个带有一些元素的

div

。我希望这些元素是

100%

容器的宽度

div

.container{
高度：100px；
宽度：100px；
显示器：flex；
弯曲方向：立柱；
溢出：滚动；
边框：1px纯黑；
}
.内部{
宽度：100%；
背景颜色：灰色；
空白：nowrap；
}

长文本长文本长文本长文本长文本长文本
XXX
XXX

更新：我提出了这个非flexbox解决方案（好奇心驱动的活动）

最初我误解了这个问题

解决方案1:在
范围内添加一个
包装
div


.container{
高度：100px；
宽度：100px；
边框：1px纯黑；
溢出-x：滚动；
}
.包装纸{
背景：橙色；
高度：自动；
宽度：最大含量；
}
.内部{
显示：块；
最小宽度：100px；
}

长文本长文本长文本长文本长文本长文本
XXX
XXX
只需在span元素中放置一个display:block，因为它们的默认显示是内联的，这就是它们行为方式的原因，
如下所示更新代码：


.container{
高度：100px；
宽度：100px；
显示器：flex；
弯曲方向：立柱；
溢出：滚动；
边框：1px纯黑；
对齐项目：flex start；/*禁用拉伸对齐*/
}
.内部{
最小宽度：100%；/*最小宽度而不是宽度*/
背景颜色：灰色；
空白：nowrap；
}

长文本长文本长文本长文本长文本长文本
XXX
XXX
这是flex解决方案

将
柔性方向：列
替换为
容器
中的
柔性流：列包裹
。并将
宽度：100%
从
.internal
中删除

你会得到想要的结果


.container{
高度：100px；
宽度：100px；
显示器：flex；
/*弯曲方向：立柱*/
柔性流：柱包裹；
溢出：滚动；
边框：1px纯黑；
}
.内部{
/*宽度：100%*/
背景颜色：灰色；
空白：nowrap；
}

长文本长文本长文本长文本长文本长文本
XXX
XXX
这不是我想要的解决方案。我希望文本仅在1行中。我们不需要添加display:block，因为flex项默认情况下是分块的：@Temani:我同意，我没有检查容器flexproperty@TalRofe：是的，我没有完全理解：）泰马尼·阿菲夫有right@TemaniAfif：嗨，伙计！现在已更新我的答案；）A提出了一个非flexbox解决方案。由于2个答案已经在使用flexbox:）请看一看：）我们不需要添加display:block，因为flex项目在默认情况下是分块的：我希望里面的所有元素都是100%完整的width@TalRofe检查更新