Having Problems with Flexbox 2 columns 3 items

Question

I am trying to get my flexbox items to wrap correctly and can't seem to get this to work the way I need it. I have sections (purple, pink, blue), with pink and blue height could be different making it hard to set the correct height for the container. Pink is generally short in height, while blue is generally longer but can be short. Pink will never be as tall as purple. The layout on the desktop, which is not the way I want it currently looks like this:

The way I want the desktop to look like is this:

The Mobile layout is correct looking like this:

My code currently is

    #container {   display: flex;flex-wrap: wrap;}
    #purple {flex: 0 0 25%; max-width: 25%; width: 25%}
    #pink {    flex: 0 0 75%; max-width: 75%;width: 75%}
    #blue {    flex: 0 0 75%; max-width: 75%;width: 75%}

<div id="container">
    <section id="purple"><img /></section>
    <section id="pink"><p>small content block</p></section>
    <section id="blue"><p>large content block</p></section>
    </div>

Yea I think you reached the limitation with flex on this one. If you can change the mobile layout to stacking then you can put the 2 variable height boxes together but if your current design stays and you want to use flex then you would have to show/hide when switching to mobile — Huangism, Jul 16 '18 at 16:06
Indeed...not possible with flexbox with the current HTML structure. — Paulie_D, Jul 16 '18 at 16:07
Also since the purple is an image which looks fairly large on desktop, you should probably consider putting it as its own row on mobile or it would be really small — Huangism, Jul 16 '18 at 16:14
So scrapping the mobile, how do I get the desktop setup correctly. — John Hamman, Jul 17 '18 at 20:46

score 0 · Answer 1 · answered Jul 16 '18 at 16:43

I see your expected view works for mobile view and You can use media-query for desktop view,

For Desktop view, you need to flow you container in column direction and apply max-height to wrap items of container.

  @media only screen and (min-width: 768px){
          #container {   
          display: flex;
          flex-flow:column wrap;
          max-height:100vh;
        }
          #purple{
            height: 100vh;
            margin-right:15px;
          }

        }

This doesn't work at all. What happens is the blue box floats on the right side. — John Hamman, Jul 17 '18 at 20:49

Having Problems with Flexbox 2 columns 3 items

1 Answers1