Html 在Flexbox CSS中，右侧没有用于溢出滚动项的空间_Html_Css_Flexbox

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

html css

Html 在Flexbox CSS中，右侧没有用于溢出滚动项的空间,html,css,flexbox,Html,Css,Flexbox,我有一个场景，Flexbox div中的子元素应该是nowrap，如果子项超过了允许的最大空间，则水平滚动请查看以下链接：正如您在上面的链接中所看到的，右侧的空间被消除在使用水平滚动时，如何包含父div或子div的填充/边距空间提前谢谢如果您使用display flex将白色框包装在另一个div中，并对该div应用填充，则在末尾将有足够的空间 <!DOCTYPE html> <html> <head> <style>

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

请查看以下链接：

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

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

提前谢谢

如果您使用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>

这似乎是可行的，但我不能在代码中再插入一个div，在我的实际场景中就不行了