Flex布局溢出外容器答案

【问题标题】：Flex layout overflow outer containerFlex布局溢出外容器
【发布时间】：2015-10-19 23:54:03
【问题描述】：

我有这个fiddle 显示我的代码。它可以按我的意愿工作：基本上它是一个容器，其中包含 1 行项目，宽度为 100%，两个项目宽度固定。如果容器足够大，它们应该保持在一条线上，否则它们应该包裹起来。

我不明白为什么当我的视口变小时，两个较小的块开始在容器外侧溢出，并且它们没有像我预期的那样缩小。我尝试删除固定宽度并使用 flex-basis，但它破坏了布局。

这是小提琴上的代码：

<div class="container">
    <div class="search-form flex-row">
        <span class="block big">hi</span>
        <div class="flex-block">
          <span class="block">hi</span>
          <span class="block">hi</span>
        </div>

        <span class="block">hi</span>
    </div>
 </div>

CSS：

.container{
    height:100vh;
    width:100%;
    padding:50px;
}
.search-form {
    /* margin-bottom: 0px; */
    margin: auto;
    height: 100%;
    font-size: 18px;
    background-color:blue;

}
.flex-row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
}
.flex-block{
 display:flex;
    flex-wrap:wrap;
    justify-content: center;
}
.block{
    flex-shrink:1;
    width:150px;
    background-color:red;
    margin:5px;
}
.block.big{
    width:100%
}

【问题讨论】：

我很困惑为什么你提到“行”但使用flex-direction:column。您在块上有固定的宽度...flexbox 不会覆盖它。
我谈论行是因为基本上第一个是一个元素行，第二个是一个两个元素行。然后将它们包装为每行一个元素，就像普通的列布局一样。
好吧，正如我所说，你有固定的宽度......除了重新考虑你所追求的东西（我不清楚）以及你的方式之外，你无能为力去做吧。

标签： html css flexbox

【解决方案1】：

抱歉，我没有 50 个声望，这就是我需要遮阳篷的原因。

第一个（可能）问题：

你有没有把视口的元标记放在头部

<meta name="viewport" content="width=device-width, initial-scale=1.0">

第二次（也许）妥协：

也许你可以和min-width一起工作？

【讨论】：

【解决方案2】：

简单数学：100% + 100px = 太多

.container{
    height:100vh;
    width:100%;
    padding:50px; /* Issue */
}

你可以使用救援

fiddle demo using border-box

*{margin:0; box-sizing: border-box;}

或

fiddle demo using calc()

.container{
    height:100vh;
    width: calc(100% - 100px); /* cause 50padd + 50padd = 100 */
    padding:50px;
}

【讨论】：