Можно использовать функцию CSS overflow, чтобы управлять тем, как контейнер обрабатывает контент. переполняется.
В случае, когда вы хотите использовать полосу прокрутки вдоль оси Y, чтобы обеспечить прокрутку содержимого за пределами контейнера, вы можете определить свойство overflow-y, как показано в следующем фрагменте кода:
overflow-y: scroll;
Здесь я немного запутался в своем понимании CSS3 и семантического пользовательского интерфейса. Использование Grid.Column с набором свойств stretched приводит к тому, что свойство flex-flow устанавливается для элемента. Это свойство поддерживает связь в измерениях дочерних элементов своего владельца. Я пытался поиграть с вашим кодом, и при использовании в тандеме с настройкой высоты дочерних элементов на абсолютное значение, то есть выраженное в единицах vh или px, дизайн, похоже, дает результаты, близкие к тому, что вы указали.
В качестве отказа от ответственности вы должны знать, что я выбрал значение высоты довольно произвольно, и оно все еще работает, но я не гарантирую, что это работает в широком диапазоне форм-факторов окон или в нескольких браузерах.
Вот разница FieldGrid.js, основанная на файлах вашего примера, который является единственным файлом, который был изменен для получения желаемых результатов:
44c44
< <Segment>
---
> <Segment style={{ height: '1px', overflowY: 'scroll' }}>
55c55
< <Segment>
---
> <Segment style={{ height: '1px', overflowY: 'scroll' }}>
Основываясь на ваших предложениях, я создал еще одну codesandbox), с которой вы можете поиграть. Обратите внимание, что высота в 1 пиксель явно бессмысленна, но, похоже, работает, а также обратите внимание, что свойство overflow-y указано для каждого элемента, которому нужна полоса прокрутки.
person
vidbina
schedule
25.02.2019
