Сетка пользовательского интерфейса материала с независимыми столбцами прокрутки ⇐ CSS

[Anonymous]

Я хочу создать несколько столбцов с прокруткой, используя пользовательский интерфейс Material в React. У меня был способ сделать это в Bootstrap с помощью Flex, но я не могу его перевести. Я собрал демо-версию хакерского способа сделать это, требующего знания размера содержимого над тем, что вы пытаетесь прокрутить (в данном случае AppBar)
https: //codesandbox.io/s/pmly895mm

Код: Выделить всё

html,
body {
margin: 0;
height: 100%;
}

#root {
height: 100%;
}

.grid-container {
height: calc(100% - 64px);
}

.grid-column {
height: 100%;
overflow-y: auto;
}

В этой демонстрации я установил высоту всех 100 % (html, body, #root), а затем создал два класса-сетки-контейнера с высотой 100 %. - Высота AppBar и столбец сетки с высотой 100% и параметром переполнения auto.
В Bootstrap я бы применил эти классы к строке и столбцы соответственно

Код: Выделить всё

.flex-section {
flex-grow: 1;

display: flex;
flex-direction: column;

min-height: 0;
}

.flex-col-scroll {
flex-grow: 1;

overflow: auto;

min-height: 100%;
}

И не имеет значения, что находится над элементами, потому что Flex позаботился о высоте.
В частности, я хочу избежать необходимости do height:calc(100% - 64px), так как для этого мне нужно заранее знать высоту элемента. У меня будет несколько страниц, на которых я бы хотел разместить некоторый контент над областью прокрутки, который будет иметь динамически высокий контент.

Подробнее здесь: https://stackoverflow.com/questions/524 ... ng-columns