4

I'm building 100% height application sidebar that needs to scroll and keep a few links at the very bottom. My solution works perfectly in Chrome, but has an overlap issue in Safari.

The basic bit looks like this:

position: fixed;
left: 0;
min-height: 100vh;
height: 100vh;
display: flex;
flex-direction: column;
width: 180px;
justify-content: flex-start;
overflow-y: scroll

Check out the Codepen here:

http://codepen.io/jackmcdade/pen/PZveXo?editors=1100

Any help or insight appreciated! I fear it may be this Webkit Bug

Jack McDade
  • 689
  • 7
  • 14

1 Answers1

6

Philip Walton's flexbox workaround #1 was the answer. Adding these to the child flex elements worked:

flex-shrink: 0;
flex-basis: auto;

https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored

Jack McDade
  • 689
  • 7
  • 14