我正在使用 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;
}
}