Материал-высота элемента сетки пользовательского интерфейса превышает высоту его контейнера

#css #reactjs #material-ui

#css #reactjs #материал-пользовательский интерфейс

Вопрос:

У меня есть контейнер сетки, который содержит 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

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

Спасибо.

1. Попробуйте использовать direction="column" и alignItems="stretch" …

2. @Praveen Я добавил свойства direction и alignItems в контейнер. Контейнер разделен по вертикали с заголовком слева и содержимым справа.

3. Возможно, это потому, что ваш контейнер имеет высоту 100%, а сумма высот элементов больше 100%. Это весь код? Я проверил это здесь, и похоже, что все в порядке, или вы забыли что-то опубликовать codesandbox.io/s/xj4woo9jvp

4. @Dominik Извините, я пропустил это. Я обновил свой вопрос ссылкой на codesandbox.

Ответ №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>

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

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

Ответ №2:

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

Ответ №3:

Человек! Это раздражает.

Я немного взломал codesandbox, чтобы приблизить его к моему взгляду на эту проблему.

MDN / Web tech / CSS / max-height говорит, что если указан процент, он определяет максимальную высоту как процент от высоты содержащего блока.

Я потратил час, прогуливаясь вверх и вниз по дереву dom в отладчике стилей Chrome dev tools, и вы можете видеть, где vh размеры элементов в направлении корня соответствуют ожидаемой высоте, тогда сетка Mui отображается как max-height 100% , height: 3319px