时间戳

首页 > 解决方案 > Flexbox CSS 中的溢出滚动项右侧没有空间

html - Flexbox CSS 中的溢出滚动项右侧没有空间

问题描述

我有一个场景，Flexbox div 中的子元素应该是nowrap，然后如果子项超过最大允许空间，则水平滚动。

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

正如您在上面的链接中看到的那样，右侧的空间被消除了。

在此处输入图像描述

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

提前致谢！

标签： htmlcssflexbox

解决方案

如果你用 display flex 将白框包裹在另一个 div 中，并为该 div 应用 padding-right，你将在最后有空间。

<!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>

推荐阅读