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

Question

我有一个包含一些元素的div 。 我希望这些元素是容器div的100%宽度。

 .container { height: 100px; width: 100px; display: flex; flex-direction: column; overflow: scroll; border: 1px solid black; }.inner { width: 100%; background-color: gray; white-space: nowrap; }

 <div class="container"> <span class="inner">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</span> <span class="inner">XXX</span> <span class="inner">XXX</span> </div>

如您所见，如果您水平滚动，背景并非100%完整。

Answer 1

更新您的代码，如下所示：

 .container { height: 100px; width: 100px; display: flex; flex-direction: column; overflow: scroll; border: 1px solid black; align-items:flex-start; /* disable the stretch alignment*/ }.inner { min-width: 100%; /* min-width instead of width*/ background-color: gray; white-space: nowrap; }

 <div class="container"> <span class="inner">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</span> <span class="inner">XXX</span> <span class="inner">XXX</span> </div>

或者像下面这样，如果您希望所有元素都获得完整的颜色

 .container { height: 100px; width: 100px; overflow: scroll; border: 1px solid black; }.container>div { min-width: 100%; display: inline-block; }.inner { display:block; background-color: gray; white-space: nowrap; }

 <div class="container"> <div> <span class="inner">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</span> <span class="inner">XXX</span> <span class="inner">XXX</span> </div> </div>

Answer 2

这是灵活的解决方案。

将flex-direction: column替换为flex-flow: column wrap in .container 。 并从.inner中删除width: 100% 。

你会得到想要的结果。

 .container { height: 100px; width: 100px; display: flex; /*flex-direction: column;*/ flex-flow: column wrap; overflow: scroll; border: 1px solid black; }.inner { /*width: 100%;*/ background-color: gray; white-space: nowrap; }

 <div class="container"> <span class="inner">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</span> <span class="inner">XXX</span> <span class="inner">XXX</span> </div>

Answer 3

更新：我想出了这个非 flexbox 解决方案（好奇心驱动的行动） Initially I misunderstood the question 。

解决方案 1：在您的spans周围添加一个wrapper div 。

 .container { height: 100px; width: 100px; border: 1px solid black; overflow-x:scroll; }.wrapper{ background:orange; height:auto; width:max-content; }.inner{ display:block; min-width:100px; }

 <div class="container"> <div class="wrapper"> <span class="inner">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</span> <span class="inner">XXX</span> <span class="inner">XXX</span> </div> </div>

Answer 4

只需在 span 元素中放置一个 display: 块，因为它们的默认显示是内联的，这就是它们的行为方式的原因，