Зачем гибкие элементы сворачиваться друг в друга, когда я добавляю отступы к одному из них, когда они имеют одинаковую ширину?

Question

У меня проблема, когда я добавляю отступ справа ко второму элементу, он сворачивается в первый элемент. пожалуйста, обратите внимание, что у меня есть flex: 1 на обоих детей, я нашел решение, но я не знаю почему. решение состоит в том, чтобы использовать ширину или гибкую основу.

<div class="parent">
<div></div>
<div class="p"></div>
</div>

css вот так

.parent{
display:flex;
}
.parent>div{
flex:1;
}
.parent .p{
padding-right:3rem
}