如何让父容器自适应flex子项宽度，防止右侧列被遮挡？

我有一个高度受限的列表容器，内部子项需按从上到下、从左到右的顺序排列，元素过多时会在右侧生成新列。请问如何让父容器宽度贴合内容，避免占满窗口导致右侧列被遮挡？

已尝试方案：
尝试设置父容器不同的display属性，但第二列的子项被隐藏，且.parent_item的宽度仅等于第一列宽度。

解决方案：
问题核心在于原Grid布局强制分配固定比例列宽，导致容器无法贴合内容；同时子项的Flex换行逻辑被父容器宽度限制卡死。通过以下调整即可解决：

• 父容器改用inline-grid，让宽度由内部内容决定，而非强制占满窗口
• 替换固定比例的grid-template-columns: 1fr 1fr为auto auto，让列宽自适应子项实际宽度
• 调整.parent_item的高度与溢出属性，确保Flex换行能正常触发并撑开容器

修改后的代码 #

CSS

.parent {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  margin: auto;
  padding: 2px;
  max-height: 150px;
  /* 改为inline-grid，让容器宽度贴合内部内容 */
  display: inline-grid;
  /* 列宽自适应子项实际宽度 */
  grid-template-columns: auto auto;
  gap: 2px;
}

.parent_item {
  display: flex;
  flex-flow: column wrap;
  gap: 2px;
  /* 固定高度触发换行，替代原百分比高度 */
  height: 150px;
  /* 移除max-width限制，让换行后的子项撑开容器 */
  overflow: visible;
}

.parent_item div {
  background-color: #f2f2f2;
  height: 30px;
  min-width: 30px;
}

HTML

<div class="parent">
  <div class="parent_item">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
  </div>
  <div class="parent_item">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
</div>

关键修改说明 #

1. inline-grid：让父容器不再强制占满可用宽度，而是根据内部两个子项的总宽度自适应
2. grid-template-columns: auto auto：每个Grid列的宽度匹配对应子项的实际宽度，避免固定比例导致的空间浪费
3. 固定height:150px：确保子项达到高度限制时触发Flex列换行，而非依赖不稳定的百分比高度
4. 移除max-width: max-content：让子项换行后能正常撑开容器宽度，避免右侧新生成的列被隐藏

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