Material-ui Высота элемента сетки превышает высоту контейнера

Question

У меня есть грид-контейнер, который содержит 2 грид-элемента.Я установил высоту контейнера и второго элемента сетки на 100%.Высота второго элемента сетки превышает высоту контейнера, и появляется свиток.

Вот код, если это помогает.

function App() {
  return (
    <Grid container style={{height: '100%'}}>
      <Grid item xs={12} style={{border: 'solid 1px'}}>
        Header
      </Grid>

      <Grid item xs={12} style={{height: '100%', border: 'solid 1px'}}>
        Content
      </Grid>
    </Grid>
  )
}

https://codesandbox.io/s/8k0xy60nx2

Как мне сделать, чтобы второй элемент сетки занимал оставшуюся высоту контейнера и не превышал ее?Что мне здесь не хватает?

Спасибо.

Answer 1

Попробуйте это с direction="column",

<Grid
  container
  direction="column"
  style={{ border: "solid 5px", height: "100%" }}
>
  <Grid
    item
    style={{ border: "solid 1px", backgroundColor: "yellow" }}
  >
    Header
  </Grid>

  <Grid
    item
    xs
    style={{ border: "solid 1px", backgroundColor: "red" }}
  >
    Content
  </Grid>
</Grid>

Отредактированная песочница

Надеюсь, это поможет ...

Answer 2

Обратите внимание, что родительский контейнер переполнен высотой первого элемента. Это потому, что вы установили 100% высоты для второго элемента, но у вас на самом деле есть 2 элемента в вашем родителе. Сумма предметов должна быть равна или меньше, если вы не хотите полосу прокрутки. Попробуйте установить высоту первого элемента на 10%, а второго на 90%. Свиток исчезнет