子元素将从父元素中删除

Question

我正在使用 react、typescript。
className,section-3 的子元素，className a，扩展到 section-3 之外。
如果要显示的元素过多，地图会溢出父元素（屏幕）。
当它变得比父元素大时，我想隐藏它。

<main>
  <section className="section-1" />
  <section className="section-2" />
  <section className="section-3">
    <div style={{ overflow: 'auto', padding: 16 }}>
      <div>profile</div>
    </div>
    　
    <div className="a" style={{position: "relative"}}>
      <div>
        <p>member</p>
        <div className="flex gridgap-8">
         <figure size="30" overflow="hidden" class="RoundedIcon__RoundedIconStyle-sc-1vet04f-0 iVjUxZ"><img src="test,svg"/>
         <figure size="30" overflow="hidden" class="RoundedIcon__RoundedIconStyle-sc-1vet04f-0 iVjUxZ"><img src="test,svg"/>
         <figure size="30" overflow="hidden" class="RoundedIcon__RoundedIconStyle-sc-1vet04f-0 iVjUxZ"><img src="test,svg"/>
         <figure size="30" overflow="hidden" class="RoundedIcon__RoundedIconStyle-sc-1vet04f-0 iVjUxZ"><img src="test,svg"/>
         <figure size="30" overflow="hidden" class="RoundedIcon__RoundedIconStyle-sc-1vet04f-0 iVjUxZ"><img src="test,svg"/>
         <figure size="30" overflow="hidden" class="RoundedIcon__RoundedIconStyle-sc-1vet04f-0 iVjUxZ"><img src="test,svg"/>
         <figure size="30" overflow="hidden" class="RoundedIcon__RoundedIconStyle-sc-1vet04f-0 iVjUxZ"><img src="test,svg"/>
         <figure size="30" overflow="hidden" class="RoundedIcon__RoundedIconStyle-sc-1vet04f-0 iVjUxZ"><img src="test,svg"/>
         <figure size="30" overflow="hidden" class="RoundedIcon__RoundedIconStyle-sc-1vet04f-0 iVjUxZ"><img src="test,svg"/>
         <figure size="30" overflow="hidden" class="RoundedIcon__RoundedIconStyle-sc-1vet04f-0 iVjUxZ"><img src="test,svg"/>
         <figure size="30" overflow="hidden" class="RoundedIcon__RoundedIconStyle-sc-1vet04f-0 iVjUxZ"><img src="test,svg"/>
         <figure size="30" overflow="hidden" class="RoundedIcon__RoundedIconStyle-sc-1vet04f-0 iVjUxZ"><img src="test,svg"/>
         <figure size="30" overflow="hidden" class="RoundedIcon__RoundedIconStyle-sc-1vet04f-0 iVjUxZ"><img src="test,svg"/>
         <figure size="30" overflow="hidden" class="RoundedIcon__RoundedIconStyle-sc-1vet04f-0 iVjUxZ"><img src="test,svg"/>
         <figure size="30" overflow="hidden" class="RoundedIcon__RoundedIconStyle-sc-1vet04f-0 iVjUxZ"><img src="test,svg"/>
         <figure size="30" overflow="hidden" class="RoundedIcon__RoundedIconStyle-sc-1vet04f-0 iVjUxZ"><img src="test,svg"/>
         <figure size="30" overflow="hidden" class="RoundedIcon__RoundedIconStyle-sc-1vet04f-0 iVjUxZ"><img src="test,svg"/>
         <figure size="30" overflow="hidden" class="RoundedIcon__RoundedIconStyle-sc-1vet04f-0 iVjUxZ"><img src="test,svg"/>
         <figure size="30" overflow="hidden" class="RoundedIcon__RoundedIconStyle-sc-1vet04f-0 iVjUxZ"><img src="test,svg"/>
        </div>
      </div>
      <button>Button</button>
    </div>
  </section>
</main>;

<块引用>

style.scss

  main {
    display: grid;
    grid-template-columns: minmax(160px, 430px) minmax(160px, 430px) 1fr;
    overflow: hidden;
  }

    section {
      &.section-1 {
        position: relative;
        overflow-y: auto;
        border-right: 2px solid #e1e6ed;
        display: grid;
        grid-template-rows: 1fr auto;
      }
      &.section-2 {
        position: relative;
        overflow-y: auto;
        display: grid;
        grid-template-rows: auto 1fr;
        border-right: 2px solid #e1e6ed;
      }
      &.section-3 {
        padding: 24px;
        overflow-y: auto;
        display: grid;
        grid-template-rows: 1fr auto;
      }
    }