Make a specific div scroll if parent content overflow

I have a parent div with four divs inside. The inner content is dynamic. If the inner content is larger than the parent div, than I want a specific div to scroll.

<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>

If the inner content becomes larger than the content div I want the snipit div to scroll.

.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;
    }
 }
}