Flex-direction: column wrap布局下子元素溢出父容器宽度的问题

首先，你遇到的问题根源在于flex column布局的宽度计算逻辑：
当使用flex-flow: column wrap时，flex容器（也就是你的#parent）的默认宽度是由单列内容的最小宽度决定的，它不会自动横向扩展来容纳换行后的多列内容，所以子元素会溢出容器。

至于你加的min-width:0为什么没用？这个属性是用来解除flex子元素的最小宽度限制（默认flex子元素不会窄于内容宽度），但它作用的是flex容器的直接子元素（也就是你的<li>），而不是解决父容器本身宽度不扩展的问题，所以对你的场景完全无效。

解决方法 #

方法1：给父容器设置width: fit-content #

fit-content会让容器宽度自适应内容的实际宽度，包括换行后的多列：

#parent {
  display:flex; 
  flex-flow:column wrap;
  background-color:red;
  height:100px;
  width: fit-content; /* 关键属性 */
}

方法2：改用Grid布局（更适合多列菜单场景） #

Grid的自动多列特性能更轻松实现固定高度下的垂直换行，无需手动处理宽度适配：

#parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* 可自定义列宽 */
  background-color:red;
  height:100px;
}

方法3：用inline-flex替代flex #

inline-flex的容器宽度会自动适配内容（包括多列），不过它会变成行内元素，需要注意整体布局的兼容性：

#parent {
  display:inline-flex; 
  flex-flow:column wrap;
  background-color:red;
  height:100px;
}

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