Flex CSS with fixed width and equal height

Question

I have three sections in a container. When I resize my browser to the max-width of 668px, I need to make the section 1 and section 3 in one row and the section 2 in the below row. The section 2 width should be proportional to the section 1 and section 3 width.

But now once I minimize the browser size to 668px and below, then section 3 is not visible.

This is what I tried.

@media (max-width: 668px) {
  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-self: flex-start;
  }
  .container .section1 {
    height: 300px;
  }
  .container .section1,
  .container .section3 {
    flex: 0 0 262px;
    margin: 3px;
    display: block;
    flex-grow: 0;
    flex-shrink: 0;
  }
  .container .section2 {
    flex: 0 0 500px;
    flex-grow: 0;
    flex-shrink: 0;
    order: 1;
    min-height: 235px;
  }
}

@media (max-width: 940px) {
  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-self: flex-start;
  }
  .container .section1 {
    height: 300px;
  }
  .container .section1,
  .container .section3 {
    flex: 0 0 262px;
    margin: 3px;
    display: block;
    flex-grow: 0;
    flex-shrink: 0;
  }
  .container .section2 {
    flex: 0 0 500px;
    flex-grow: 0;
    flex-shrink: 0;
    order: 1;
    min-height: 235px;
  }
}

<div class="container">
  <div class="section1">Section 1</div>
  <div class="section2">Section 2</div>
  <div class="section3">Section 3</div>
</div>

score 0 · Accepted Answer · answered Mar 15 '17 at 20:07

0

You don't have any height specified on .section3.

On .section1 you have height: 300px.

On .section2 you have min-height: 235px.

But on .section3 you have nothing. Try this adjustment to your code:

.section1, .section3 {
    height: 300px;
}

jsFiddle demo

answered Mar 15 '17 at 20:07

Michael Benjamin

346,931
104
581
701

It works fine now, Is there any fallback css for handling this incase flex is not supported by mobile browser. – Mar 20 '17 at 19:40
It really depends on what browsers you want to support. Flexbox is supported by most modern browsers. For a complete review see my answer [**here**](http://stackoverflow.com/a/35137869/3597276) and also [**this post**](http://stackoverflow.com/q/33359157/3597276). – Michael Benjamin Mar 20 '17 at 19:42

Flex CSS with fixed width and equal height

1 Answers1

jsFiddle demo