Pomoc w programowaniu, odpowiedzi na pytania / Css / Div przesuwa się w dół, gdy rozmiar czcionki jest mniejszy niż rodzeństwo w układzie flexbox - css, flexbox

Div przesuwa się w dół, gdy rozmiar czcionki jest mniejszy niż rodzeństwo w układzie flexbox - css, flexbox

W poniższym fragmencie używam układu flexbox i zauważam dziwne zachowanie, którego nie mogę zrozumieć.

Pamiętaj, że pytam o wyjaśnienie teoretyczne DLACZEGO to się dzieje, ponieważ znam już pewne obejścia tego problemu.

Problem dotyczy pierwszego przykładu nagłówka, w którym Imają kontener div (a), a następnie 2 inline-block div (a1, a2). Gdy a2 jest ustawione z rozmiarem czcionki mniejszym niż a1, a2 DIV spada o kilka pikseli, gdzie oczekiwałem, że oba div będą nadal wyrównane i na tej samej wysokości (podane przez wysokość linii nagłówka). Widać, że spada po niebieskiej górnej krawędzi, którą tam dodałem.

Problem nie występuje, jeśli usunęłam div „a” i po prostu przesunąłem b1 i b2, aby były dziećmi nagłówka, jak pokazano w drugim nagłówku mojego przykładu.

Próbowałem już dostosować kilka właściwości flexbez szczęścia (wyrównanie elementów itp.). Wiem również, że line-height ma jakieś dziwne sztuczki, które czasami nie są tak oczywiste, ale nie rozumiem, dlaczego to się dzieje i czy to ma być takie, czy to jest błąd.

Przetestowano na Chrome 65, Opera 52 i IE 11 i dzieje się na wszystkich.

header {
line-height: 50px;
background-color: gray;
font-size: 15px;
font-family: Arial;
display: flex;
}

.a1, .a2 {
border-top: 1px solid blue;
display: inline-block;
}

.a2 {
font-size: 8px;
}

.b1, .b2 {
border-top: 1px solid blue;
}

.b2 {
font-size: 8px;
}

<header>
<div class="a">
<div class="a1">AAAAA1</div>
<div class="a2">AAAAAAA 2</div>
</div>
</header>

<p>&nbsp;</p>
<header>
<div class="b1">AAAAA1</div>
<div class="b2">AAAAAAA 2</div>
</header>