Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

Suppose I have three containers of variable width and height:

Container 1

-------------
|           |
|           |
|           |
|           |
-------------

Container 2

--------------------------
|                        |
|                        |
|                        |
|                        |
--------------------------

Container 3

--------------------------
|                        |
|                        |
|                        |
|                        |
|                        |
|                        |
|                        |
|                        |
|                        |
|                        |
--------------------------

I want them to fit inside another container with a known width. I know the widths and height of all of these containers as well. I want to know and understand how we will apply ratio over here.

Requirements:

All the boxes will have equal height in the end. Their width can be whatever is necessary to fit them in the parent container without distorting them (aspect retion). Their aspect ration should not be distorted. They have to fit into the parent containers width. The parent containers height can be variable. For instance this is what I am looking for:

-----------------------------------------------------------
|                                                         |
|                                                         |
| ------------- --------------------------- ------------- |
| |           | |                         | |           | |
| |Container 1| | Container 2             | |Container 3| |
| |           | |                         | |           | |
| |           | |                         | |           | |
| ------------- --------------------------- ------------- |
|                                                         |
|                                                         |
|                                                         |
|                                                         |
|                                                         |
|                                                         |
|                                                         |
|                                                         |
|                                                         |
|----------------------------------------------------------

The amount of containers in a row can vary. Sometimes I have three containers and sometimes 2. Sometimes even 4. Any suggestion and help would be highly appreciated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment