为何外层<div>无法自适应内容高度？长文本溢出问题求助

兄弟，你的问题根源在于内部div被设置了固定高度，直接锁死了容器的自适应能力！

咱们来拆解一下：你给.act下的所有div都加了height: 2.35rem，同时还写了height: 100%——这就导致中间承载文本的容器高度被固定死了，哪怕<p>里的文本再长，容器也没法跟着撑开，自然就会溢出到外层.act之外。再加上你用了align-items: center的flex布局，进一步强化了子元素高度一致的特性，彻底堵死了自适应的可能。

修复方案 #

只需要做几个小调整就能解决：

1. 移除全局的固定高度：把.act div里的height: 2.35rem删掉，不要给所有子div都设固定高度。
2. 单独给左右按钮设置固定尺寸：如果需要左右按钮保持固定大小，单独给第1、第3个div设置高度，别影响中间的内容容器。
3. 调整flex对齐方式（可选）：如果希望文本在内容容器里垂直居中，可以给中间的<p>单独设置垂直居中，而不是靠父容器的align-items: center强制所有子元素高度一致。

修改后的Sass代码如下：

@mixin flexCenter($direction) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $direction;
}

.act {
  @include flexCenter(row);
  width: 100%;
  min-height: 2rem;
  border-radius: 2px;
  margin-top: 1rem;
  justify-content: space-between;
  box-shadow: 0px 3px 4px -1px rgba(0,0,0,0.48);
  padding: .5rem;
  cursor: pointer;
  // 让flex子元素默认拉伸，填充容器高度
  align-items: stretch;

  div {
    width: 1.35rem;
    border-radius: 2px;
    @include flexCenter(row);
    
    // 只给左右按钮设置固定高度
    &:first-child, &:last-child {
      height: 2.35rem;
    }
    
    &:nth-child(2) {
      background: inherit;
      width: 100%;
      text-align: center;
      // 让中间容器自动适应内容，去掉强制height:100%
      height: auto;
      // 如果需要文本垂直居中，给内部p设置flex布局
      display: flex;
      align-items: center;
      justify-content: center;

      p {
        font-size: .9rem;
        // 防止文本溢出，可选添加换行
        word-wrap: break-word;
      }
    }
  }
}

关键修改点说明 #

• 给.act加上align-items: stretch，让子元素默认拉伸填充容器高度，同时左右按钮保留固定高度，中间容器则自动跟随内容调整。
• 移除了所有子div的全局固定高度，只给左右按钮单独设置，避免限制中间内容容器的自适应。
• 给中间容器的<p>添加了word-wrap: break-word，确保长文本自动换行，不会横向溢出。

这样修改后，不管文本是短是长，外层.act都会自动适应内部内容的高度，再也不会出现溢出问题啦！

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