flex-direction: column布局下按钮被截断的问题求助

我在制作带有动作覆盖层的聊天UI时，遇到按钮被截断的问题。当前实现代码如下：

CSS代码 #

.parent {
  position: relative;
  overflow: hidden;
  background: #111;
  color: white;
}
.overlay {
  background: purple;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

HTML代码 #

<div class="parent">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.
  <div class="overlay">
    <button>
      A
    </button>
    <button>
      B
    </button>
    <button>
      C
    </button>
    <button>
      D
    </button>
  </div>
</div>

需求说明：

• 期望实现类似网格的布局，按钮数量增加时布局能自动扩展
• 设置flex-direction: row时显示正常，但按钮无法堆叠
• 移除overflow: hidden后按钮会溢出覆盖层
• 固定宽度可解决问题，但需要动态宽度的实现方案

解决方案1：Flex布局实现动态自适应宽度 #

修改.overlay的CSS，通过width: fit-content让容器宽度随按钮内容自适应，同时限制最大宽度避免超出父容器：

.parent {
  position: relative;
  overflow: hidden;
  background: #111;
  color: white;
  min-height: 60px; /* 避免内容过短时按钮挤压 */
  padding: 10px;
}
.overlay {
  background: purple;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: fit-content; /* 关键：宽度随内容自适应 */
  max-width: 100%; /* 防止超出父容器范围 */
  gap: 5px; /* 按钮间添加间距优化布局 */
  padding: 5px;
}
.overlay button {
  min-width: 40px; /* 可选：让按钮宽度统一 */
}

解决方案2：Grid布局实现自动网格（更直观） #

如果需要更标准的网格效果，使用Grid的auto-fill属性可自动根据按钮数量调整列数：

.parent {
  position: relative;
  overflow: hidden;
  background: #111;
  color: white;
  min-height: 60px;
  padding: 10px;
}
.overlay {
  background: purple;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, auto)); /* 自动填充列 */
  gap: 5px;
  padding: 5px;
  width: fit-content;
  max-width: 100%;
}

问题原因说明 #

原代码中.overlay为绝对定位且未设置宽度，flex-wrap: wrap没有足够空间触发换行，导致按钮被父容器的overflow: hidden截断。添加width: fit-content后，容器会根据按钮换行后的实际宽度自适应，max-width: 100%确保不会超出父容器边界，同时保留overflow: hidden的作用。

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