I am experiencing a peculiar issue that has left me puzzled.
p {
padding: 0;
margin: 0;
}
.fc {
display: flex;
flex-direction: column;
}
.fc > article {
flex: 1 1 auto;
display: flex;
flex-direction: column;
border: 1px solid #000;
}
.fc > article > .p1 {
flex: 0 0 25%;
}
.fc > article > .p2 {
flex: 1 1 75%;
padding: 1rem;
background-color: rgba(255, 255, 0, 0.2);
}<div class="fc">
<article>
<p class="p1">Hello world</p>
<p class="p2">
Something texty
</p>
</article>
<article>
<p class="p1"></p>
<p class="p2">
Something texty
</p>
</article>
<article>
<p class="p1">Hello World 3</p>
<p class="p2">
Something texty
</p>
</article>
</div>There seems to be an issue with the nesting of flex containers within articles inside a wrapper div using flex properties. The problem arises when one of the paragraphs is empty, causing the second paragraph to overflow the article.
https://i.stack.imgur.com/z3KmW.png
This issue can only be replicated by inspecting the element in the browser. When the code is saved as an HTML file and opened in a browser, the problem occurs.
A potential solution involves changing from using percentage values to pixel/rem units for the flex-basis, but I prefer to use percentages in this case.
An alternative workaround is to insert a inside the empty p tag, but this feels more like a temporary fix rather than addressing the root cause.