What causes the difference in width of a flex element and an inline-block element?

Question

See this fiddle:

https://jsfiddle.net/9hnj0b8v/3/

The only differnce in the two elements:

.label1
{
  display: inline-block;
}

.label2
{
  display: flex;
}

So the two labels are identical except one is set to inline-block and one to flex. Why do they have a different width? Why is one exceeding its container and the other does not?

Answer 1

You are styling span elements with display: inline-block. By default, block level elements are 100% of the width of their parent container. As you are forcing the input and span onto the same line with white-space: nowrap, this forces the span to break out of the boundary of the parent container.

Why do they have a different width? Why is one exceeding its container and the other does not?

Using display: flex allows child elements to shrink to fit the available space so the span element starts with the 100% width of its parent but then shrinks down to fill the available space instead.