css - Semantic UI React 整页网格，如何 overflow hidden 的列内容？

Question

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

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

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

请查看沙盒:

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

Answer 1

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

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

overflow-y: scroll;

这里是我对 CSS3 和语义 UI 的理解有点模糊的地方。使用具有 stretched 属性集的 Grid.Column 会导致元素上设置的 flex-flow 属性。此属性在其持有者的 child 的维度中保持关系。我试过玩弄你的代码，当与将 child 的高度设置为绝对值一起使用时，即以 vh 或 px 为单位表示，该设计似乎产生了接近您指定的结果。

作为免责声明，您应该知道我选择的高度值相当随意，但它仍然有效，但我不保证它适用于各种窗口形状因素或跨多个浏览器。

这是基于您的示例文件的 FieldGrid.js 差异，这是唯一经过修改以获得所需结果的文件:

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

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