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