如何选择哪个组件在嵌套的 flex 容器中获得滚动条？答案

【问题标题】：How do I choose which component gets scrollbars in nested flex containers?如何选择哪个组件在嵌套的 flex 容器中获得滚动条？
【发布时间】：2011-10-30 08:02:36
【问题描述】：

我在 flex 中有几个嵌套的 VBox，如果总内容大于窗口高度，我的目标是让其中一个获得滚动条。

但是，当我扩大容器时，它根本没有滚动条（垂直滚动策略为 AUTO），并且外部容器延伸到屏幕底部，导致整个应用程序获得滚动条。

所以它看起来像这样：

 ____________
|            |
| Container  |
|            |
|____________|
|            |
| Scrolling  |
| Container  |
|____________|
|            |
| Container  |
|____________|

当底部容器变大时，如何确保只有内部（滚动）容器获得滚动条？

谢谢

【问题讨论】：

标签： apache-flex scrollbars

【解决方案1】：

简而言之 - 将滚动容器的 minHeight 属性设置为 100：

<mx:VBox height="100%">
    <mx:Something/>

    <mx:VBox minHeight="100" height="100%">
        <!-- here will be scrollbars, if needed -->
        <mx:Something/>         
    </mx:VBox>

    <mx:Something/>
</mx:VBox>

默认情况下，Box 会根据其所有子项的相应大小来计算其最小大小。当外部容器进行布局时，它会询问 Box，它可以显示的最小尺寸以及它的实际尺寸。因此，除非手动更改，否则最小大小等于实际大小，因此父容器会自行拉伸或显示滚动条。

【讨论】：

我缺少的是 height="100%" 和 minHeight 的组合

【解决方案2】：

将您想要滚动条的VBox 放入Canvas：

<mx:VBox ... />

<mx:Canvas width="100%" height="100%">
    <mx:VBox left="0" right="0" top="0" bottom="0"> ... </mx:VBox>
</mx:Canvas>

<mx:VBox ... />

【讨论】：