语义UI反应整页网格，如何隐藏溢出列内容？

Question

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

我试图限制某些网格列中显示的内容量，这样即使内容比容器长，它也会显示y滚动条或被隐藏。

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

请看沙箱：

• Code Sandbox：https://codesandbox.io/s/j76k3jr0v

Answer 1

可以使用CSS overflow功能来控制容器处理内容溢出的方式。

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

overflow-y: scroll;

这是我对CSS3和语义UI的理解有点模糊的地方。使用带有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。注意1px的高度显然是无意义的，但似乎仍然有效，并且还注意到已为需要滚动条的每个元素指定了overflow-y属性。