使用 flexbox 将可滚动容器与选项卡面板（Office UI Fabric Pivot）样式布局对接

Question

我正在使用的 Office UI Fabric 组件存在布局问题。这可能特定于该框架中的组件，也可能不特定于该框架中的组件，但我会将其表述为 flexbox 的一般 HTML/CSS 问题。一般来说，我正在尝试设计一个具有两个网格（DetailsList）组件的布局，每个组件都在一个页面类型容器（Pivot）中。我还需要将标签标题和搜索框固定在顶部，并将按钮固定在底部（无论网格中的列表有多短）。如果列表的内容很长，我只希望滚动条在网格中可见，而不是父容器（否则您必须向下滚动才能看到重要按钮）。

我可以使用 ScrollablePane 组件让这个布局在没有 Pivot 的情况下工作。像这样：

但是我不知道如何设计它，因此枢轴导航器也固定在顶部。我能做的最好的显示在this example on StackBlitz (the editable link) 中，或者按照这个截图：

这是当前布局的剪裁版本，所有内容都停靠并正确滚动，除了当您滚动列表时枢轴滚动到视图之外：

.app-wrapper {
      display: flex;
      flex-direction: column;
      width: 100%;  
      position: absolute;
      top: 0;
      bottom: 0;
    }
    .app-defaultFlex {
      flex: 1;
      position: relative;
    }
    .app-buttonContainer{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      background: white
    }
    

    <div id='FlexTest' className='app-wrapper'>
    	<div className='header'>
    	  {header}
    	</div>
    	<ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto} className='app-defaultFlex'>
    		<Pivot>
    			<PivotItem id='PivotItemAllProjects' headerText="All Projects">
    				<DetailsList items={projectItems}/>
    			</PivotItem>
    			<PivotItem headerText="Recent" id='PivotItemRecentProjects'>
    				<DetailsList items={projectItems}/>
    			</PivotItem>
    		</Pivot>;
    	</ScrollablePane>
    	<div className='footer app-buttonContainer'>
    	  <DefaultButton className='app-FileButton' primary={true} disabled={false}>File to Project</DefaultButton>
    	</div>
    </div>

是否可以使用 flexbox 将 Pivot 选项卡也停靠在顶部，以便它们保持在视图中？我尝试了多种变体（请参阅我的 StackBlitz 示例中的 pivot2 - pivot5 变体），但我无法确定这是可以使用 flexbox 解决的问题，还是对我使用 ScrollablePane 组件的方式的限制带有嵌入式 Pivot。

2019 年 5 月 28 日更新：

即使这被简化为只有一个 Pivot 组件和一个包含一个 DetailsList 的 PivotItem，我看不出使用像 Sticky 组件或任何类型的 flex 布局这样的东西是如何工作的，根据这个伪-代码：

<Pivot>
  <Sticky stickyPosition={StickyPositionType.Header}>
	<PivotItem
	  id='PivotItemAllProjects'
	  headerText="All Projects"
	>
	  <DetailstList>
	  ..foo
	  </DetailsList>
	</PivotItem>
  </Sticky>
</Pivot>

包装每个单独的 PivotItem 不起作用 - 根本没有渲染任何内容。此外，这意味着我们要粘贴枢轴标签并且它是子标签。即使将 PivotItem 包装在标头 Sticky 中，并将 PivotItem 的子项包装在页脚 Sticky 中也不起作用。我在这里追逐不可能吗？

Answer 1

为什么需要将 Pivots 放在 Scrollable Pane div 中？如果您将枢轴放在标题中，那么您会得到您想要的，不是吗？

否则，您可以将 Pivots 包装在 Sticky 组件中。

ETA：哇，我去链接 Sticky 组件，但似乎它不存在。