В нижеприведенном фрагменте первая строка имеет два div с flex-grow: 1
. Как и ожидалось, каждый div занимает 50% экрана.
При добавлении дополнения к левому div это уже не так. Может кто-нибудь объяснить, почему?
body > div {
height: 50px;
display: flex;
}
body > div > div {
flex: 1;
box-sizing: border-box;
}
#a {
background-color: red;
}
#b {
background-color: green;
}
#c {
padding: 10px;
background-color: blue;
}
#d {
background-color: yellow;
}
<div>
<div id="a"></div>
<div id="b"></div>
</div>
<div>
<div id="c"></div>
<div id="d"></div>
</div>