Question

在我的情况下，Flexbox div中的子元素应为nowrap，然后在子项超出最大允许空间的情况下水平滚动。

请检查链接：https://www.w3schools.com/code/tryit.asp?filename=FY50HW0O11JZ

如您在上面的链接中所见，右侧的空间被消除了。

在使用水平滚动时如何包含父div或子div的填充/边距空间？

谢谢！

Answer 1

如果将白框包装在另一个具有display flex的div中，并在该div上右填充，则末尾会有空格。

<!DOCTYPE html>
<html>
    <head>
        <style>
            .a {
                display: flex;
                flex-direction: row;
                overflow-x:auto;
                background: yellow;
            }
            .a1 {
                min-width: 300px;
                border: 1px solid;
                background: white;
                flex: 0 0 auto;
                overflow:auto;
            }
        </style>
    </head>
    <body>

    <div class="a" style="max-width: 500px; border: 1px solid; padding: 30px;">
            <div style="display: inherit">
                <div class="a1">a</div>
                <div class="a1">b</div>
                <div class="a1">c</div>
            </div>
        </div>
    </body>
</html>

Flexbox CSS中右侧没有用于溢出滚动项目的空间

1 个答案: