如何设置 flex 父级以包裹所有子级答案

【问题标题】：How to style flex parent to wrap all children如何设置 flex 父级以包裹所有子级
【发布时间】：2015-01-11 08:09:12
【问题描述】：

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

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

尝试滚动，您将看到黄色行 (.sk_row) 类并未出现在其所有子项周围。

解决方案很好，但我想知道为什么父级在视觉上不包含所有子级。我想我可能遗漏了一些关于 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>

#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不同该操作想要改变孩子的行为，我希望父母改变。

【问题讨论】：

是单独滚动的行还是一起滚动的所有行？
所有在一起，就像小提琴一样，只是让我难过的那个黄色区域。
我在搞定，让它独立工作，现在就绑定它
@Stacker-flow，我很想看看你的小提琴。 . .
@Godisgood 我没有提供这个作为答案，因为我没有真正解决它，但这就是我得到的结果。jsfiddle.net/hserczk5/5 & jsfiddle.net/hserczk5/6

标签： css flexbox

【解决方案1】：

因为.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>

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

.element {
    width: 200%;
}

如果将其设置为 100%，则其宽度将仅与 .container 一样宽。

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

【讨论】：

所以你不能用css将容器的宽度设置为它的flex子元素的宽度？（当容器也是 flex 时）
据我所知……抱歉。（但我对“flex”没有太多经验......）如果它只是关于背景，你可以改变它，以便 .sk_scrl 有背景颜色和边框而不是 .sk_row （边框看起来不一样），或者将其更改为 .sk_row 设置 overflow: auto 而不是 .sk_scrl （但你将有两个滚动条）...
刚刚意识到为什么我很难做到这一点。我认为具有溢出集的元素是滚动的，但也许是它的内容滚动。这可以解释为什么样式和滚动条宽度不相等。