Как я могу обернуть div?

По сути, я хочу, чтобы внутренние элементы div за пределами внешнего div располагались в соответствии с шириной внешнего div, который, в свою очередь, расширялся и сжимался в соответствии с шириной окна браузера, например:

.---------------------.
|                     | <-- Browser Window
|.-----------------. |
| | ,-, ,-, ,-,  | |
| |  |X|  |X|  |X|  | |
| |  `-`  `-`  `-`  | |
| |                 | |
| | ,-, ,-, ,-,  | |
| |  |X|  |X|  |X|  | |
| |  `-`  `-`  `-`  | |
| `-----------------` |
|                     |
`---------------------`

.-------------------------------.
|                               | <-- Browser Window enlarged
|.---------------------------. |
| | ,-, ,-, ,-, ,-, ,-,  | |
| |  |X|  |X|  |X|  |X|  |X| <----- Inner divs wrap around accordingly, as if
| |  `-`  `-`  `-`  `-`  `-`  | |     they are text
| |                           | |
| | ,-,                      | |
| |  |X|                      | |
| |  `-`                      | |
| `---------------------------` |
|                               |
`-------------------------------`

Что было бы лучшим (и самым простым с точки зрения времени разработки )способом сделать это?