Я использую MUI с React, и у меня есть элемент <Paper>, который упаковывает <Grid> с 3 дочерними элементами. При установке для свойства overflowY нижнего элемента сетки значения «auto», когда содержимое становится слишком большим, полоса прокрутки не отображается, но разбивает родительский контейнер. Это мой код:
<Paper
elevation={0}
style={{
height: "776px",
width: 342,
overflowY: "hidden"
}}
>
<Grid
container={true}
direction="column"
style={{ overflowY: "hidden" }}
>
{
<Grid
container={true}
item={true}
style={{
flexGrow: 1,
padding: "16px",
width: "100%",
flexWrap: "nowrap",
position: "sticky",
top: 0
}}
>
{props.pageTitle && (
<Grid item={true} style={{ marginTop: 6 }}>
{!filterOpen && (
<Typography variant="h6">
<span
style={{
paddingLeft: 8
}}
>
{props.pageTitle}
</span>
</Typography>
)}
</Grid>
)}
{props.allowFilter && (
<Grid justify={"flex-end"} container={true} item={true}>
<FmsFilterBox
filterText={filterText}
onChange={setFilterText}
cssFilterBoxWidth="100%"
onFilterOpenChanged={setFilterOpen}
/>
</Grid>
)}
</Grid>
}
<Grid item={true} style={{ flexGrow: 1 }}>
<Divider style={{ width: "100%" }} />
</Grid>
<Grid
item={true}
style={{
flexGrow: 1,
overflowY: "auto"
}}
>
{props.children(filteredData)}
</Grid>
</Grid>
</Paper>
Я пробовал все, но могу не появляется полоса прокрутки для 3-го (нижнего) элемента сетки (тот, который отображает {props.children (FilterData)}, который представляет собой список с элементами списка, извлеченными из конца).
Если я удаляю overflowY: "hidden" из <Paper>, содержимое 3-го скрыто, но все еще нет полосы прокрутки - пожалуйста, смотрите прикрепленные фотографии.
У меня действительно нет идей, у кого-нибудь была эта проблема раньше? Спасибо.