I have a container with fixed sized boxes inside. 

* The container does not have a fixed width. It fills the entire screen width.
* The boxes have to be always aligned to the right.
* The boxes should have a margin between them.

[![enter image description here](https://i.stack.imgur.com/L3tKa.png)](https://i.stack.imgur.com/L3tKa.png)

When the container resizes (browser window becomes small), currently the boxes will break into a second line.

[![enter image description here](https://i.stack.imgur.com/nY6P3.png)](https://i.stack.imgur.com/nY6P3.png)

But this is not what I want.

What I want is the boxes to remain in the **same line** and **reduce the margin between the boxes** to make space to keep them in the same line.
When there is no space at all, I want the boxes to overlap each other to keep themselves in the same line.

[![enter image description here](https://i.stack.imgur.com/dC2pg.png)](https://i.stack.imgur.com/dC2pg.png)

How do I make the boxes stay in the same line and overlap each other when there is no space, and spread out nicely like in the first image when there is enough space?