Why doesn't inline-flex / inline-grid behave consistently as with inline in contenteditable?

Question

When I use display: inline-flex; or display: inline-grid; there seems to be some added "spaces" or some kind of extra focused calculations take place. I'm not sure exactly what's happening. When using the arrow keys to navigate through a contentediatble div, the caret gets stuck as if it is focusing on a different element or something. Does anyone know the reason why? And if so, anyways to prevent this behavior (not using JavaScript to handle the events)?

Consider the difference between the two following contenteditable divs:

(The caret gets "stuck" in between "Hello" and "World" when navigating with arrow keys)

<div contenteditable="true"><span style="display: inline-flex;"><span>Hello</span></span><span style="display: inline-flex;">World!</span></div>

<div contenteditable="true"><span style="display: inline;"><span>Hello</span></span><span style="display: inline;">World!</span></div>

Answer 1

Flexbox is a one-dimensional layout system that we can use to create a row or a column axis layout. In display: flex property, every element that you have inside that flex parent container turns into a flex item. So, the caret gets "stuck" in-between "Hello" and "World" when navigating with arrow keys.

CSS grid is a two-dimensional layout system, we can work with rows and columns together. It opens a lot of different possibilities to build more complex and organized design systems.

"CSS grid is for layout, Flexbox is for alignment". More Reference Grid and flexbox, When it uses Grid and FlexBox

flex: This value causes an element to generate a block-level flex container box.

inline-flex: This value causes an element to generate an inline-level flex container box.

grid: This value causes an element to generate a block-level grid container box.

inline-grid: This value causes an element to generate an inline-level grid container box.

You can use the below codes to prevent The caret gets "stuck" in-between "Hello" and "World" when navigating with arrow keys).

<div contenteditable="true"><span style="display: inline-block; margin-right: 2px">Hello</span><span style="display: inline-block;" >World!</span></div>

<div contenteditable="true"><span style="display: inline-block;">Hello</span><span style="display: inline-block;" >World!</span></div>

<div contenteditable="true" style="display: flex; justify-content: space-between;"><span>Hello</span><span>World!</span></div>