Flexbox puts blank line inside <li> in chrome
I have the following HTML:
<ol>
<li>
<div style="display: flex;">
<div>Giraffe</div>
<div>Lion</div>
<div>Koala Bear</div>
</div>
</li>
</ol>
For some reason Google Chrome puts a blank line above the animals, like this:
1.
GiraffeLionKoala Bear
Why is this and how to prevent it? It behaves like this even if I manually set the width.
Tested on Chrome, FF and Safari. Problem with Google Chrome.
+3
source to share
2 answers
Apparently your question was already before .
VERY IMPORTANT: The error question has an answer containing a full explanation of the reason ( ::marker
), below is the accepted answer.
Since the accepted answer does not currently help solve your problem (make flex expand the entire width of the element <li>
). And the explanation doesn't seem to do it, here's a practical solution:
display: inline-flex;
width: 100%;
ol li .li-flex {
display: inline-flex;
width: 100%;
}
<ol>
<li>
<div class="li-flex">
<div>Giraffe</div>
<div>Lion</div>
<div>Koala Bear</div>
</div>
</li>
</ol>
+2
source to share