Flex по вверх flex выходит за грань своего родителя?
Почему в данном случае когда изменяется разрешение он выходит за рамки своего родителя ? Блок со свойством флекс не может работать внутри флекс ?
body {
padding: 20px;
}
.main {
max-width: 600px;
display: flex;
background: #c7c7c7;
}
.l_block {
width: 50%;
background: #000;
}
.r_block {
width: 80%;
display: flex;
overflow: hidden;
}
.r_block > div {
background: red;
flex: 0 0 25%;
margin: 10px;
}
div {
height: 200px;
}<div style="display:flex;background: green;max-width:800px;height: 400px;">
<div class="main">
<div class="l_block">
</div>
<div class="r_block">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>