如何修复设置max-height后flex列表无法自适应尺寸的问题？

为<ul>设置max-height:192px时，列表无法正常自适应换行布局；移除该属性后显示正常，如何修复？

原始代码 #

CSS #

ul {
    display: flex;
    flex-flow: column wrap;
    position: absolute;
    list-style: none;
    max-height: 192px;
    padding: 5px;
    background: #090;
}

li {
    flex: 1 0 30px;
    min-width: 100px;
    margin: 1px;
    padding: 0 2px;
    background: rgba(255, 0, 0, 0.75);
    color: #fff;
    font-family: arial;
    line-height: 30px;
}

HTML #

<ul>
    <li>Line 0</li>
    <li>Line 1</li>
    <li>Line 2</li>
    <li>Line 3</li>
    <li>Line 4</li>
    <li>Line 5</li>
    <li>Line 6</li>
    <li>Line 7</li>
    <li>Line 8 is a little bit longer</li>
</ul>

问题原因 #

使用flex-flow: column wrap布局时，浏览器需要明确的容器宽度约束来计算换行时机。当<ul>仅设置max-height但未定义宽度时，absolute定位的容器会优先收缩宽度适配内容，导致flex布局无法正确计算列数和元素高度，进而出现布局错乱。同时li的flex:1 0 30px设置会让元素在不确定空间内拉伸，进一步干扰布局计算。

修复方案 #

方案1：给容器添加宽度约束 #

给<ul>设置width: fit-content，让容器根据内容自动计算合适宽度，同时保留max-height限制：

ul {
    display: flex;
    flex-flow: column wrap;
    position: absolute;
    list-style: none;
    max-height: 192px;
    width: fit-content; /* 添加宽度自适应规则 */
    padding: 5px;
    background: #090;
}

li {
    flex: 1 0 30px;
    min-width: 100px;
    margin: 1px;
    padding: 0 2px;
    background: rgba(255, 0, 0, 0.75);
    color: #fff;
    font-family: arial;
    line-height: 30px;
}

方案2：调整列表项的flex属性 #

移除li的flex-grow属性（将flex:1 0 30px改为flex:0 0 30px），让列表项保持固定高度，避免拉伸干扰布局：

ul {
    display: flex;
    flex-flow: column wrap;
    position: absolute;
    list-style: none;
    max-height: 192px;
    padding: 5px;
    background: #090;
}

li {
    flex: 0 0 30px; /* 修改flex属性，取消自动拉伸 */
    min-width: 100px;
    margin: 1px;
    padding: 0 2px;
    background: rgba(255, 0, 0, 0.75);
    color: #fff;
    font-family: arial;
    line-height: 30px;
}

两种方案均可实现max-height限制下的正常自适应换行，可根据实际场景选择。

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