Подскажите с flexbox

[0x0000]

Пытаюсь разобраться в flexboxe.
Столкнулся с непонятным поведением.

Блок (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;
  }

Но получаются не равные:



Элемент, в котором длинее текст (зеленый) получается длинее.

Что я делаю не так?

[niggagang]

тебе надо прописывать margin для обеих строковых вырвниваний, чтобы подмена классов происходило равномерно и вообще лучше вместо flex использовать cloud.

[gryllus]

Я тоже недавно изучал flexbox. Оставляю ссылку, почитайте и всё у вас встанет на свои места. Если хотите одинаковыми жёлтое и зелёное поля то используйте flex-basis с одинаковыми или какими вам угодно постоянными значениями, px, em, %.
Стили надо писать в CSS, а не в HTML, валидатор ругаться будет, перенёс ваш background в файл со стилями ( в html убрал) всё прекрасно работает.
http://css-live.ru/articles/flex-gro...ak-li-eto.htmlС Наилучшими пожеланиями!