Why doesn't parent element grow with the overflown text?

[everdimension]

Here’s the example: http://codepen.io/everdimension/pen/pEXJXq?editors=1100

The problem:
The .text element has padding, but because it doesn’t grow when text is overflown, we can scroll to the end, but only so far that the right-most text touches the right edge. Screenshot

I wish that it had the padding of the .text element at the end.

How can I make the .text element grow together with its text?

[everdimension]

Oh, found the solution.
Just make the .text element an inline-block.

[Author]

Posts