0

I'm creating a carousel that will display an instagram feed. Instagram pictures are square, so the plan is to create a row of a few square picture containers and redistribute the rest of the space to left and right buttons.

The site layout is fluid and flexbox-based. Please see the fiddle https://jsfiddle.net/xc196he7/. As you can see, the space is distributed this way - 1/5 to the header, and 2/5 to the carousel and the footer.

My problem is with the squares. The carousel height is entirely fluid. Is there a way to set each square width equal to that height? The 

.photo
{
    flex: 0 0 30%;
}

approach is wrong, it's just there to show the expected result. The remaining space is redistributed this way

.left, .right
{
    flex-grow: 1;
}

Is it possible with pure CSS or the only way is to set the width with JS?

Oleg Shemetov
  • 490
  • 2
  • 15
  • Maybe this might point you in the right direction: http://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout. There are a few css solutions in there. – Arathi Sreekumar Aug 23 '16 at 13:46
  • unfortunately most of these solutions use the padding trick, which relies on the known (in a way, percentage or absolute value) *width* and the height is dependent on in. in my case the *height* is in a way fixed and I should calculate the width. – Oleg Shemetov Aug 23 '16 at 13:55
  • I don't think you can set the width based on the height without javascript. Unfortunately. Not that I know of. – Arathi Sreekumar Aug 23 '16 at 13:56

0 Answers0