Question

我正在构建一个旨在包含简单的交互式面板的Webapp。

我的目标是有一个#container，当溢出时可以滚动，并且其中的#panel也可以滚动，以防止父对象（#container）溢出。

换句话说：

如果有1个面板，请填写剩余高度
如果有1个面板，并且它有一个很大的表，其行可能会使面板溢出：填充剩余的高度并在面板上显示滚动
如果有10个面板，但它们都不能全部容纳：在#container上显示滚动

这是代码：

    .container
    {
        background: red;
        padding: 16px;
        display: flex;
        flex-direction: column;
        height: 128px;
        overflow: scroll;
    }

    .panel
    {
        background: green;
        margin-bottom: 8px;
        display: flex;
        flex-grow: 1;
        flex-direciton: column;
    }

    .table-container
    {
        background: blue;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

<html>
    <body>
        <p>
            Scenario: One table
            <br>
            This should shrink table and only show a scrollbar on the panel (green)
        </p>
        <div class='container'>
            <div class='panel'>
                <div class='table-container'>
                    <table>
                        <tr><td>col1</td><td>col2</td></tr>
                        <tr><td>col1</td><td>col2</td></tr>
                        <tr><td>col1</td><td>col2</td></tr>
                        <tr><td>col1</td><td>col2</td></tr>
                        <tr><td>col1</td><td>col2</td></tr>
                        <tr><td>col1</td><td>col2</td></tr>
                        <tr><td>col1</td><td>col2</td></tr>
                        <tr><td>col1</td><td>col2</td></tr>
                    </table>
                </div>
            </div>
        </div>
        <p>
            Scenario: Two elements that can fit in one container
            <br>
            This should shrink table, show scroll on it's panel and display second element just fine
        </p>
        <div class='container'>
            <div class='panel'>
                <div class='table-container'>
                    <table>
                        <tr><td>col1</td><td>col2</td></tr>
                        <tr><td>col1</td><td>col2</td></tr>
                        <tr><td>col1</td><td>col2</td></tr>
                        <tr><td>col1</td><td>col2</td></tr>
                        <tr><td>col1</td><td>col2</td></tr>
                        <tr><td>col1</td><td>col2</td></tr>
                    </table>
                </div>
            </div>
            <div class='panel'>
                B
            </div>
        </div>
        <p>
            Scenario: Three elements that can't fit in one container
            <br>
            This should shrink table and show scrollbar on it's panel, while also displaying a scrollbar on the container
            because these 3 can't fit in the container
        </p>
        <div class='container'>
            <div class='panel'>
                A
            </div>
            <div class='panel'>
                <div class='table-container'>
                    <table>
                        <tr><td>col1</td><td>col2</td></tr>
                        <tr><td>col1</td><td>col2</td></tr>
                        <tr><td>col1</td><td>col2</td></tr>
                        <tr><td>col1</td><td>col2</td></tr>
                        <tr><td>col1</td><td>col2</td></tr>
                        <tr><td>col1</td><td>col2</td></tr>
                    </table>
                </div>
            </div>
            <div class='panel'>
                B
            </div>
        </div>
    </body>
</html>

填充剩余空间而不强制执行高度

0 个答案: