列表项内div无法占满父元素宽度，图片上方文本布局异常求助

问题根源 #

嘿，我帮你找到了问题所在！你遇到的这个宽度溢出问题，核心是flex布局下的列表项（li）没有自己的内部布局上下文。当你给.text-block设置width:100%时，它并没有以父元素li的宽度为基准计算，而是直接参考了最外层的flex容器#button-container的宽度——因为默认情况下，li作为flex容器里的item，只是一个“占位项”，没有建立自己的块级布局上下文，导致内部元素的百分比宽度计算跑偏了。

两种快速修复方案 #

方案1：给li添加flex布局上下文

把li改成垂直方向的flex容器，这样内部的.text-block就能正确继承li的宽度：

#button-container li {
  display: flex;
  flex-direction: column;
  /* 可选：加些内边距让内容和边框之间更宽松 */
  padding: 0 8px;
}

这样设置后，.text-block的width:100%就会严格匹配li的宽度，不会再溢出到外层容器。

方案2：给li设置明确的宽度约束

如果你不想改变布局结构，可以给li设置固定的flex-basis或者最大宽度，让.text-block的百分比宽度有明确的参考基准：

#button-container li {
  flex-basis: 180px; /* 根据你的需求调整这个值 */
  max-width: 180px;
}

这种方式适合你希望每个列表项保持固定宽度的场景。

另外注意：你代码里的#button-container的width属性没写完（width: 9...），记得补全成有效值（比如width: 90%;），避免出现其他布局异常。

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