Flex布局溢出外容器

Question

我有一个小提琴显示了我的代码。它的工作方式是我想要的:基本上它是一个带有1行条目的容器，它占用100%的宽度，以及两个宽度固定的容器。如果容器足够大，它们应该保持队形，否则就应该包装。

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

这是小提琴上的密码：

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

Answer 1

Sry，我没有50个名誉，这就是为什么我需要。

First (可能)问题：

你把视图的元标签放在头上了吗？

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

第二次(可能)妥协：

也许你可以和min-width合作

Answer 2

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

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

去拯救你可以用的

http://jsfiddle.net/hxknmzfd/8/

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

或

http://jsfiddle.net/hxknmzfd/7/

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