How to set block width correctly?

Question

css

Firework. There is a piece of code -------> https://jsfiddle.net/8kdgg1ht/3/
The task is to make a block in which the content is placed horizontally, + horizontal scroll if the block width is exceeded. In the example, the content is placed in the .wrap-inner block, in order for everything to work as it should - the block needs to be set to a fixed width, BUT, if you set the width of the parent to be greater than the total width of the content placed in it - then when scrolling to the end - there is free place, if set-less - then the content is simply not displayed... hence the question, how to set the correct width of the .wrap-inner block without the help of scripts, if the number of blocks placed in it is not known in advance?
PS Or maybe someone has other solutions in mind?

Answer 1

It's better like this: https://codepen.io/anon/pen/mEqKox
set max-width and display:inline-block to a large block - then there will be no empty space if there are few small blocks.

Answer 2

Maybe so?
https://jsfiddle.net/mrnobody/8kdgg1ht/5/

Answer 3

Then like this:
https://codepen.io/hlopka/pen/GqOGwx