0

I want to create a page with a main area and a scrollable side area. When the page is too small, I want the side area to wrap below and the whole page to scroll instead. If possible I want to do this in pure CSS. I've come up with the following, which works in Chrome but not Safari. (In Safari, the whole page always scrolls.)

How do I fix this, and more importantly, have I misunderstood flexboxes somehow?

html, body, main {
  height: 100%;
  margin: 0;
}

main {
  display: flex;
  flex-flow: row wrap;
  overflow: scroll;
}
content {
  min-width: 600px;
  flex: 9999 1 auto;
  background-color: #ffa;
}
aside {
  flex: 1 1 auto;
  overflow: scroll;
  background-color: #aff;
}
<main>
  <content>
    main
  </content>
  <aside>
    side
    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10000<br>
    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10000<br>
  </aside>
</main>

View full page to see responsive behavior, or see this fiddle.

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Dan
  • 12,409
  • 3
  • 50
  • 87
  • If you are using properties like `flex:9999` then you do not understand flexbox. – Paulie_D Dec 05 '17 at 14:44
  • @Paulie_D Ha, fair. A non-flexbox solution would be just as good, but I couldn't think of one. – Dan Dec 05 '17 at 15:04
  • I can't check Safari personally, but with an extra wrapper and make the `aside` a flex container, it should work on Safari as well: https://jsfiddle.net/s54azpsy/2/ ... if this work, I can add it as an answer – Asons Dec 05 '17 at 15:28
  • @LGSon Hmm, that seems to have the same problem. – Dan Dec 05 '17 at 15:29
  • And how about this: https://jsfiddle.net/s54azpsy/3/ – Asons Dec 05 '17 at 15:32
  • @LGSon That one doesn't scroll the whole page in a narrow window in Chrome. – Dan Dec 05 '17 at 15:39
  • No, it doesn't, and I assumed you used a media query to control that: https://jsfiddle.net/s54azpsy/4/ – Asons Dec 05 '17 at 15:44
  • Since snippet 2 and 3 in this answer of mine is similar, do they work in Safari? ... https://stackoverflow.com/questions/47628082/flexbox-layout-with-two-equal-height-children-one-containing-nested-flexbox-wit/47628145#47628145 – Asons Dec 05 '17 at 18:21

0 Answers0