CSS flex box last space removed

Question

By setting the display of an item to flex I am finding the last space is removed from a text string so.

Answer 1

Reason

When you don't use display: flex, the your layout becomes something like

Some text Link

The text (including the space at the end) is wrapped inside an anonymous inline box:

Any text that is directly contained inside a block container element (not inside an inline element) must be treated as an anonymous inline element.

However, Flexbox layout blockifies the flex items:

The display value of a flex item is blockified: if the specified display of an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent.

Then, the layout will be like

Some text Link

This might not seem directly related, but it's relevant because of the white-space processing model:

Then, the block container's inlines are laid out. [...] As each line is laid out, [...]

3. If a space (U+0020) at the end of a line has white-space set to normal, nowrap, or pre-line, it is also removed.

So when the anonymous element and the link were both inline, the space was at the middle of a line. If you had multiple spaces they would collapse into a single one, but not disappear completely.

However, when you use flexbox, each flex item has its own lines, and the space is therefore at the end of a line. So it's removed.

Note this problem is not specific of flexbox, spaces at the end of an inline-block are also removed.

.in-blo {
  display: inline-block;
}

Some text Link
Some text Link

However, in that case you can just move the space outside the inline-block. In flexbox that's not possible, because anonymous flex items that contain only white space are not rendered.

Solution

If you want to preserve the space, you can set white-space to another value. white-space: pre-wrap will allow text wrapping, white-space: pre won't.

.has_flex {
  display: flex;
  white-space: pre-wrap;
}

Some text Link
Some text Link