I am facing an issue with a nested flex container setup. Below is the code snippet:
<div class="parent-container">
<div class="child-container">
<span class="color-block"></span>
<span>This is a long long long long long text.</span>
</div>
</div>
.parent-container {
display: flex;
background: orange;
}
.child-container {
display: flex;
background: green;
}
.color-block {
background: yellow;
flex: 0 0 15px;
align-self: stretch;
}
To view the result, visit https://codepen.io/crupest/pen/Lqwxpp.
The issue I'm experiencing is that the last word "text" wraps even when there is remaining space on the right. How can I prevent it from wrapping or is there any workaround?
Any help is appreciated!
Update:
My intention is to have a color label in front of the text.
A big thanks to @Kata Csortos for pointing out the importance of mentioning my purpose.