Непрямые дочерние элементы гибкого контейнера кажутся вертикально смещенными. Почему?

Question

Я пытаюсь получить три (в желтой рамке) метки: A, B и C.

Я хочу, чтобы A был выровнен по левому краю, а B и C были выровнены по правому краю. Поскольку я не хочу, чтобы рамка A увеличивалась до достижения B, я установил A display: inline. Кажется, что это почти работает, но по какой-то причине А ведет себя плохо: он обнаруживается вертикально смещенным. Кажется, это происходит из-за того, что это единственный элемент p, который не является прямым подчиненным гибкого контейнера. Но почему это происходит?

body {
  margin: 0px;
}

#main {
  display: flex;
}

.node {
  margin: 0px;
  padding: 16px;
  border: 2px dashed yellow;
}

<div id="main" style="background: red;">
  <div style="flex-grow: 1;">
    <p class="node" style="display: inline;">A</p>
  </div>
  <p class="node">B</p>
  <p class="node">C</p>
</div>

Спасибо

Answer 1

Только дочерние элементы (прямые потомки) элементов flex имеют свойства flex-item s.

Вот вы:

body {
  margin: 0px;
}

#main {
  display: flex;
  background: red;
}

.node {
  margin: 0px;
  padding: 16px;
  border: 2px dashed yellow;
}

.node:first-child {margin-right:auto}

<div id="main" style="background: red;">
  <p class="node">A</p>
  <p class="node">B</p>
  <p class="node">C</p>
</div>