如何在顺风CSS中将“增长”尺寸设置为最大宽度？

Question

我有一个基于弹性框的布局。 用于放置动态内容的元素的大小由

grow

类设置。 现在我的内容是一张大桌子。我想让它可滚动（水平），但不可能考虑其父级的固定大小（因为它的大小是由grow设置的）

结构简单表示：

<!-- Layout -->
<div class="flex">

    <!-- Sidebar menu -->
    <div class="w-xx">
        ...
    </div>

    <!-- main -->
    <div class="grow h-full">

        <!-- this element should be scrollable -->
        <div>
            ... Big Table ...
        </div>

    </div>

</div>

问题在于，

main

元素不是可滚动的，而是改变了大小并移出了窗口。

我尝试使用javascript，但没有找到任何解决方案。

Answer 1

已解决：

<!-- Sidebar menu -->
<div class="w-xx">
    ...
</div>

<!-- main -->
<div class="grow h-full overflow-hidden">

    <div class="w-full h-full overflow-hidden">

        <!-- this element should be scrollable -->
        <div class="overflow-auto">
            ... Big Table ...
        </div>

    </div>

</div>