Компонент сетки пользовательского интерфейса материала Заполнить второй столбец до конца контейнера

Я использую компонент Grid пользовательского интерфейса материала и использую свойство auto для первого столбца.

так что я

<Grid container className = {classes.borderclass}>
   <Grid item xs = {"auto"}>
      <Items />
    </Grid>
   <Grid item xs = {10}>
      <Content />
  </Grid>
</Grid>

Однако это не заполнит весь контейнер, но я не вижу возможности для остатка в размерах. Я просмотрел вариант css calc, однако я не вижу способа получить размер автоматического столбца в реакции для сравнения с div

любые предложения, даже если они не являются существенными, будут оценены.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
1 642
1

Ответы 1

Если вы посмотрите демонстрацию Material-UI, у них есть рабочий пример, который показывает свойство auto в действии. Итак, как показано в примере с здесь, вам не нужно указывать ключевое слово auto. Сделайте только это:

<Grid container className = {classes.borderclass}>
   <Grid item xs>
      <Items />
    </Grid>
   <Grid item xs = {10}>
      <Content />
  </Grid>
</Grid>

Другие вопросы по теме