Css 如何设置flex父对象的样式以包装所有子对象_Css_Flexbox

Css 如何设置flex父对象的样式以包装所有子对象

css

Css 如何设置flex父对象的样式以包装所有子对象,css,flexbox,Css,Flexbox,我正在使用css flex样式设计一个网格布局，想要一个完整的css解决方案，如果可能的话，我有办法用javascript修复它当一行超过视口宽度时，将显示滚动条，但滚动时，行元素的样式仍保持视口的大小，它似乎并没有“包装”所有的孩子见：尝试滚动，您将看到黄色行（.sk_行）类不会出现在其所有子类的周围一个解决方案是可以的，但我想知道为什么父对象不能直观地包含所有子对象。我想我可能遗漏了一些关于FlexBox的关键概念重复的小提琴代码 <body> <div id

我正在使用css flex样式设计一个网格布局，想要一个完整的css解决方案，如果可能的话，我有办法用javascript修复它

当一行超过视口宽度时，将显示滚动条，但滚动时，行元素的样式仍保持视口的大小，它似乎并没有“包装”所有的孩子

见：

尝试滚动，您将看到黄色行（.sk_行）类不会出现在其所有子类的周围

一个解决方案是可以的，但我想知道为什么父对象不能直观地包含所有子对象。我想我可能遗漏了一些关于FlexBox的关键概念

重复的小提琴代码

<body>
<div id='pg_wrap'>
    <div id='frm0'>
        <div class='sk_scrl'>
                <div class='sk_row'>
                    <div class='itm_val'>row 1</div>
                    <div class='itm_val'>1</div>
                    <div class='itm_val'>2</div>
                    <div class='itm_val'>3</div>
                    <div class='itm_val'>4</div>
                    <div class='itm_val'>5</div>
                    <div class='itm_val'>6</div>
                    <div class='itm_val'>7</div>
                    <div class='itm_val'>8</div>
                </div>
                <div class='sk_row'>
                    <div class='itm_val'>row 2</div>
                    <div class='itm_val'>1</div>
                    <div class='itm_val'>2</div>
                    <div class='itm_val'>3</div>
                    <div class='itm_val'>4</div>
                    <div class='itm_val'>5</div>
                    <div class='itm_val'>6</div>
                    <div class='itm_val'>7</div>
                    <div class='itm_val'>8</div>
                </div>
            </div>
    </div>
</div>

注意：这与

该op想要改变孩子的行为，我想让家长改变。

它没有按照您想要的方式工作，因为

。sk_row

继承了宽度，在本例中是从

\frm0

继承的：

#frm0 { width: 420px; }

使用类

.sk_scrl

时，您无法很好地看到它，因为它被设置为：

.sk_scrl { overflow: auto; }

如果您使用浏览器开发工具（假设有），您将看到围绕

.itm_val

div的元素都是420像素宽。

.itm_val

div在其容器外都可见的原因是它们从其包含的div中“溢出”

下面是一个宽度继承的示例：

<div class="container">
    <div class="element"></div>
</div>

如果将其设置为100%，则其宽度仅为

.container

这里有一个提琴：

是要独立滚动的行还是所有行一起滚动？就像在提琴中一样，所有的行一起滚动，就是那个让我难住的黄色区域。我在上面，让它独立工作，只是为了绑定它now@Stacker-flow，我很想看看你的小提琴@Godisgood我没有提供这个答案，因为我没有真正解决它，但这就是我取得的成绩因此，您不能将css容器的宽度设置为其flex子容器的宽度？（当容器也是flex时）据我所知，不是……对不起。（但我对“flex”没有太多经验…）如果只是背景，你可以改变它，使

.sk_scrl

有背景色和边框，而不是

.sk_row

（不过边框看起来不一样），或者更改它，使

.sk_row

具有

溢出：自动设置，而不是.sk_scrl（但随后将有两个滚动条）…刚刚意识到为什么我在这方面很困难。我认为有溢出集的元素是滚动的，但滚动的可能是它的内容。这可以解释为什么样式和滚动条宽度不相等。
<div class="container">
    <div class="element"></div>
</div>

.element {
    width: 200%;
}