2

I know there are a lot of questions related to css sidebars and flexbox but my case is a bit different.

I have 4 divs and want to make for example the 3rd div a sidebar in larger screens, so in small screen all 4 items follow their markup order, but in large I want to take that 3rd div and put it on the lefthand side of all the other divs with 25% width.

There is a solution with position: absolute but this causes an issue when the sidebar div is larger than all the others together and overlaps other content.

My approach is playing with flexbox but I can't get it to work properly, what I have until now is this fiddle:

.flex {
  display: flex;
  height: 300px;
  flex-direction: column;
  flex-wrap: wrap;
}

@media (min-width: 40em) {
  .sidebar {
    width: 25%;
    height: 100%;
    order: -1;
  }

  .column {
    width: 75%;
  }
}

Now there are some issues with this one:

  1. If I don't give .flex a height, the whole concept doesn't work, but I must not give it a fixed height...
  2. The .columns will get wrapped individually on very small screens when their content exceeds the height of .flex.
  3. .sidebar will still overlap other content if it's content height is larger than .flex's height.

So as you see my problem technically lies in the required height of .flex, do you see a solution there or might the whole approach using flexbox not be very sensible in this case?

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Simon
  • 7,182
  • 2
  • 26
  • 42
  • 1
    You need nested flexboxes but that would mean you can't change the order....at least until `display:contents` gets more browser support. – Paulie_D Oct 17 '16 at 13:18
  • Related - http://stackoverflow.com/questions/39644585/using-flex-order-property-to-re-arrange-items-for-desktop-and-mobile-views – Paulie_D Oct 17 '16 at 13:19

0 Answers0