Здравствуйте. Начал разбираться с flexbox, столкнулся со следующим.
Блок (block), внутри него элементы (item), расположенные по вертикали, внутри элемента два элемента (left-subitem и right-subitem), расположенные горизонтально и должны быть равные по ширине, т.к. у обоих flex-grow: 1;
<div class="block">
<div class="item">
<div class="left-subitem" style="background-color: yellow;">
str1
</div>
<div class="right-subitem" style="background-color: lime;">
str2 str2 str2
</div>
</div>
</div>
.block
{
display: flex;
flex-direction: column;
width: 600px;
margin: auto;
margin-top: 50px;
border: 1px solid #cbcbcb;
}
.item
{
flex-grow: 1;
display: flex;
flex-direction: row;
align-items: center;
}
.left-subitem
{
flex-grow: 1;
text-align: right;
}
.right-subitem
{
flex-grow: 1;
}
Элемент, в котором длинее текст (зеленый) получается длиннее. Что я делаю не так?