如何让父div内容溢出时指定子div（snipit）滚动？

问题描述 #

有一个包含多个子元素的父容器content，内部为动态内容。要求当内容超出父容器尺寸时，仅让其中的snipit div实现垂直滚动。

现有代码 #

React组件代码 #

<div className={styles.content}>
  <div className={styles.imageHolder}>
    <div className={styles.image} style={imageStyle}></div>
  </div>
  <div className={styles.sample}>
    <div className={styles.sampleTitle}>
      <span className={styles.font}>{title}</span>
    </div>
  <div className={styles.info}>
    <span>
      By: {author.name} | {datePretty}
    </span>
  </div>
  <div className={styles.snipit}>
    <span>{contentText}</span>
  </div>
  <ButtonPrimary
    classes={styles.button}
    cypressTestId="recruiter-feature-read-button"
    onClick={() => console.log("click")}
    text="READ ARTICLE"
  />
  </div>
</div>

SCSS样式代码 #

.content {
  display: flex;
  height: 100%;
  overflow-y: hidden;
  width: 100%;

  .imageHolder {
    aspect-ratio: 493 / 240;
    margin-right: 16px;
    height: 100%;

    .image {
      aspect-ratio: 493 / 240;
      background-position: center;
      background-size: cover;
    }
  }

  .sample {

    .sampleTitle {
      @include font-rubik(26px, $black, 700);

      .font {
        vertical-align: top;
        text-align: start
      }
    }

    .info {
      @include font-rubik(12px, #212121, 300);
      margin-bottom:11px
    }

    .snipit {
      @include font-rubik(14px, $black, 400);
      overflow-y: scroll;
    }
 }
}

问题原因 #

当前样式中sample容器没有设置布局规则和高度限制，snipit的高度会随内容自动撑开，导致overflow-y: scroll无法触发。需要让snipit占据sample容器的剩余空间，同时限制其高度范围。

修改后的样式代码 #

.content {
  display: flex;
  height: 100%;
  overflow-y: hidden;
  width: 100%;

  .imageHolder {
    aspect-ratio: 493 / 240;
    margin-right: 16px;
    height: 100%;

    .image {
      aspect-ratio: 493 / 240;
      background-position: center;
      background-size: cover;
    }
  }

  .sample {
    // 核心修改：设置垂直flex布局，让子元素按垂直方向排列
    display: flex;
    flex-direction: column;
    // 占据父容器剩余宽度
    flex: 1;
    // 限制高度，避免超出父容器范围
    height: 100%;
    // 防止容器自身出现滚动
    overflow-y: hidden;

    .sampleTitle {
      @include font-rubik(26px, $black, 700);
      margin-bottom: 8px;

      .font {
        vertical-align: top;
        text-align: start
      }
    }

    .info {
      @include font-rubik(12px, #212121, 300);
      margin-bottom:11px
    }

    .snipit {
      @include font-rubik(14px, $black, 400);
      // 核心修改：占据容器剩余空间
      flex: 1;
      // 内容超出时显示滚动条，无内容时隐藏
      overflow-y: auto;
      // 优化视觉：添加右侧内边距避免文字贴滚动条
      padding-right: 8px;
      // 可选：自定义滚动条样式
      &::-webkit-scrollbar {
        width: 6px;
      }
      &::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
      }
      &::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
      }
    }

    .button {
      // 固定按钮在底部，不随滚动内容移动
      margin-top: 16px;
    }
 }
}

修改说明 #

1. 给sample容器添加垂直flex布局，同时设置flex:1占据父容器剩余宽度、height:100%限制高度，确保容器不会超出父范围。
2. 给snipit设置flex:1，让它自动填充sample容器的剩余空间，此时overflow-y:auto会在内容超出时触发垂直滚动。
3. 可选添加滚动条自定义样式、元素间距优化，提升视觉体验。

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