语义UI React全页网格，如何隐藏溢出的列内容？

Question

我有一个full-page grid，它根据浏览器的高度将其高度与恒定的菜单栏和页脚高度对齐。

我正在尝试限制某些网格列中显示的内容量，以便即使内容比容器长，它也会显示y-scrollbar或被隐藏。

所需：整页网格保持不变，不会根据子元素的高度重新调整高度。

请参见沙盒：

• 代码沙箱：https://codesandbox.io/s/j76k3jr0v

Answer 1

一个人可以使用CSS overflow功能来控制容器如何处理内容溢出。

如果要使用沿y轴的滚动条以允许滚动超出容器边界的内容，则可以定义overflow-y属性，如以下代码段所示：< / p>

overflow-y: scroll;

在这里，我对CSS3和语义UI的理解有些模糊。将Grid.Column属性和stretched一起使用会导致在元素上设置flex-flow属性。该财产在其持有人子女的尺寸上保持着联系。我尝试过使用您的代码，当与子代的高度设置为绝对值（即以vh或px的单位一起使用时，该设计似乎会产生结果）接近您指定的值。

作为免责声明，您应该知道我相当随意地选择了height的值，并且仍然可以使用，但是我不能保证它可以在各种窗口形状因数或跨多个浏览器中使用。

这是根据您的示例文件得出的FieldGrid.js的区别，该文件是经过修改以获得所需结果的唯一文件：

44c44
<                   <Segment>
---
>                   <Segment style={{ height: '1px', overflowY: 'scroll' }}>
55c55
<                   <Segment>
---
>                   <Segment style={{ height: '1px', overflowY: 'scroll' }}>

根据您的输入，我创建了另一个codesandbox）供您使用。请注意，1px的高度显然是荒谬的，但似乎仍然可行，还请注意，已经为需要滚动条的每个元素指定了overflow-y属性。