In my flex container, I have set the flex direction to columns and placed 3 divs inside it. The first and third div adjust their height based on content, while the second div (referred to as A) should occupy the remaining space with an unknown height.
Within A, there will be a random number of images with unspecified dimensions. These images need to form a single row arrangement, similar to a carousel, meeting the following criteria:
- Take up the maximum possible area within
A, - Maintain aspect ratio,
- Each image should not exceed one-third of the visible width within
A, - No gaps between the images.
While setting max-width: 33% easily fulfills the second condition, achieving the first one is proving challenging as max-height: 100% seems to not work effectively.
To view a demonstration, click here: http://codepen.io/alexandernst/pen/oxqBPv
This is the anticipated outcome:
|-------------------------------------------------|\
| | \
| |---------------------------------------------| | \
| | up | | \
| |---------------------------------------------| | \
| | |
| |---------------------------------------------| | |
| | @@@@@@@@@ | | |
| | @@@@@@@@@ | | |
| | @@@@@@@@@@@@@@@@ @@@@@@@@@ @@@@@@@@@@@@@@@@ | | |
| | @@@@ 33 % w. @@@ @@@@@@@@@ @@@@ 33 % w. @@@ | | |
| | @@@@@@@@@@@@@@@@ @@@@@@@@@ @@@@@@@@@@@@@@@@ | | 400px
| | @@@@@@@@@ | | |
| | @@@@@@@@@ | | |
| |---------------------------------------------| | |
| | |
| |---------------------------------------------| | /
| | down | | /
| |---------------------------------------------| | /
| | /
|-------------------------------------------------|/