Why doesn't the text of an absolute positioned block inside a flex container stretch to full width?

Question

css

Hello!

There is a flex container in which a div block with text and absolute positioning. I can't understand why the text in a block element doesn't stretch to full width, but takes up 2 lines.

If I remove absolute positioning or increase the width of the container to 230px , then the text fits perfectly into 1 line.

But, how to solve the problem without changing the size of the container and keeping the position of the block?

Answer 1

The problem is not with the flex container, but with the absolute positioning and centering in this way (via transform: translatex()).
Any box that is absolutely positioned and given no dimensions will always try to shrink itself (and the content in itself) if it overflows its parent. Remove the transform - you will see that the block sticks to the right edge of your element and it is already 2 lines at once. If you make left smaller (in your case at least 48%) - the text will be in one line even with transform (but of course there will be no centering effect). It's all about positioning. If you use right - it will be the same.
At the same time, the transform property does the following - it does not move the element itself, but moves, one might say, the reflection of this element. That is, the element itself remains in its place ( left: 50%;) and transform simply moves its "reflection" to the left. Roughly speaking, the browser takes a photo of your element, hides it and moves the photo to the desired distance. Then you have an element in 2 lines - which means that it will be in 2 lines on the "photo".
This can only be solved by setting the width of the block, which is positioned absolutely (set it to the desired width).
You can also alternatively center the block through a negative left margin by setting the exact value in px (half the width of the block you are positioning).
If you need rubber, consider giving up absolute positioning. If you need both padding and absolute positioning - make the width of this block 100% (it will stretch to the full width of its parent).
Pts I hope that I explained clearly, in the text it is rather problematic to explain such things.