Flex layout overflow outer container - html

Question

I have this fiddle showing my code.
It works as I want : basically it is a container with 1 row item that takes 100% widht, and two items with fixed width.
If the container is big enough they should stay in line, otherwise they should wrap.
I don't get why when my viewport gets smaller the two smaller blocks start to overflow on the side outside the container and they don't shrink as I expect.
I tried to remove the fixed width and using flex-basis, but It breaks the layout.
This is the code on the fiddle:
<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, I don't have 50 reputations, that's why I need to awnser.
First (maybe) problem:
did you put the meta tag for viewport in the head
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Second (maybe) compromise:
maybe you can work with min-width?

Answer 2

Simple math: 100% + 100px = too much
.container{
height:100vh;
width:100%;
padding:50px; /* Issue */
}
to the rescue you can use
fiddle demo using border-box
*{margin:0; box-sizing: border-box;}
or
fiddle demo using calc()
.container{
height:100vh;
width: calc(100% - 100px); /* cause 50padd + 50padd = 100 */
padding:50px;
}