2016-02-19 3 views
1

Я создаю боковую панель приложения с высотой 100%, которая должна прокручиваться и содержать несколько ссылок в самом низу. Мое решение отлично работает в Chrome, но имеет проблему с перекрытием в Safari.Safari Flexbox, прокручиваемый, 100vh issue

Основной бит выглядит следующим образом:

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

Отъезд Codepen здесь:

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

Любая помощь или проницательность оценили! Я боюсь, что это может быть Webkit Bug

ответ

2

Обходной путь №1 от Flexbox Walton's flexbox был ответом. Добавление их к ребенку гибкие элементы работали:

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

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

+0

Хороший ответ. Но fyi, это было частью дубликата, на который я ссылался. http://stackoverflow.com/a/35137869/3597276 –

Смежные вопросы