css - Semantic UI React整页网格，如何隐藏溢出的列内容？

Question

我有一个整页网格，它根据浏览器高度与恒定的菜单栏和页脚高度对齐它的高度。

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

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

请看沙箱：

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

标签： cssreactjssemantic-uisemantic-ui-react

Answer 1

可以使用CSS 溢出特性来控制容器如何处理内容溢出。

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

overflow-y: scroll;

这是我对 CSS3 和语义 UI 的理解有点模糊的地方。将 aGrid.Column与stretched属性集一起使用会导致flex-flow在元素上设置的属性。此属性在其持有者的孩子的维度上保持关系。我尝试过使用您的代码，并且当与将孩子的高度设置为绝对值（即以vhor为单位表示）一起使用时px，该设计似乎产生的结果接近您指定的任何结果。

作为免责声明，您应该知道我相当随意地选择了高度值并且它仍然有效，但我不能保证这适用于各种窗口形式或多个浏览器。

这是基于您的示例文件的 FieldGrid.js 的差异，这是唯一为获得所需结果而修改的文件：

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

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