Non-direct subchildren of a flex container seem vertically misaligned. Why?

user_130758 0
Viewed 67

I'm trying to have three (yellow framed) labels: A, B, and C.

I want A to be left-aligned and B and C to be right aligned. As I don't want the frame of A to grow until reaching B, I set A's display: inline. This almost seems to work, but for some reason A is misbehaving: it shows up vertically misaligned. This seems to originate from this being the only p element that is not a direct subchild of the flex container. But why does this happen?

enter image description here

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>

Thanks

flexbox css html
1 Answers

Only children (direct descendants) of flex elements have properties of flex-items.

Here you are:

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>

user_57243030
Related