Question

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

当一行超出视口宽度时，它会显示滚动条，但滚动时，行元素的样式仍然是视口的大小，它似乎没有“包裹”它的所有孩子。

请参阅：fiddle

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

解决方案没问题，但我想知道为什么父母在视觉上不包含所有孩子。我想我可能会遗漏一些关于flexboxes的关键概念......

小提琴代码重复...

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

#frm0{      width:420px;height:200px}
.sk_scrl{   overflow:auto;display:flex;flex-flow:column;align-content:stretch}
.sk_row{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    background:#ff0;border:2px #f00 solid;
    height:50px}
.itm_val{   
    display:flex;
    border:1px #000 solid;background:#666;
    flex:0 0 100px;    height:30px; margin:0 5px;
    align-items:center;justify-content:center}

注意：这与question不同那个操作想要改变孩子的行为，我希望父母改变。

Answer 1

由于.sk_row继承了#frm0继承宽度，因此#frm0 { width: 420px; }无法正常工作：

.sk_scrl

使用班级.sk_scrl { overflow: auto; }，你看不太清楚，因为它设置为：

.itm_val

如果您使用浏览器开发人员工具（假设您有），您会发现.itm_val div周围的元素都是420像素宽。 <div class="container"> <div class="element"></div> </div> div在其容器外部都可见的原因是因为它们从包含div中“溢出”。

这是一个关于width-inheriting-thing如何工作的例子：

.container

如果将.element的宽度设置为50％，它将占用窗口内可用宽度的一半。但是，如果您希望.element { width: 200%; }占据窗口的整个宽度，则必须像这样调整宽度：

.container

如果设置为100％，则只会与{{1}}一样宽。

这是一个小提琴：http://jsfiddle.net/Niffler/n8hmpv13/

如何设置flex父级样式以包装所有子项

1 个答案: