Сетка css: детские элементы не растягиваются на полную высоту - PullRequest
Новая
       8

Сетка css: детские элементы не растягиваются на полную высоту

0 голосов
/ 14 февраля 2020

У меня есть div контейнера сетки (display: grid), который находится внутри родителя полной высоты (flex):

.scss file

  .parent { /* this layout is full height */
    display: flex:
    flex-direction: column;

    .layout-grid {
       flex: 1;  /* this makes my grid to take all available height of parent */
       display: grid; 
       grid-template-columns: 20% 1fr;
       grid-template-rows: 1fr;
       grid-template-areas:
         "left main"
         "left main";
    }
    .left { /* this child is not full height*/
       grid-area: left;
    }
    .main { /* this child is not full height */
       grid-area: main;
    }
  }

.tsx file

<div className='parent'>
   <div className='layout-grid'>
      <div className='left'> Left </div>
      <div className='main'> Main </div>
   </div>
</div>

Вот результат:

enter image description here

Внешняя синяя рамка - .layout-grid (display: grid), которая соответствует полной высоте.

Но я не могу заставить детей моей сетки выдвигаться на полную высоту, даже если сетка имеет правильную полную высоту. Я попытался justify-items: stretch безуспешно.

Но если я задаю .layout-grid конкретную c, определенную высоту, не flex:1 или height: 100%, а конкретное c значение (например, height: 90vh), затем дочерний контент расширяется до полной высоты.

Так ли должна работать сетка css? (другими словами: для того, чтобы дети заняли полную высоту, родительский контейнер сетки должен иметь значение c (не flex: 1 или%))? или есть ошибка где-то в моем стиле?

...