Flexbox child расширяет контейнер вместо переполнения

Я пытаюсь создать макет с использованием flexbox, но я в тупике, почему я не могу заставить конкретный раздел моего интерфейса переполняться полосами прокрутки. Кажется, что все работает отлично, пока не добавится большой ребенок, который, кажется, расширяет все.Flexbox child расширяет контейнер вместо переполнения

Это перо: http://codepen.io/tuckwat/pen/NNWRaB?

Обратите внимание, что полосы прокрутки отображаются на всей странице, я хочу, чтобы полосы прокрутки отображались в контейнере #view (темно-синий), когда ребенок становится слишком большим.

Вот ручка с переполнением: авто добавлены в #view - http://codepen.io/tuckwat/pen/VawKyp

Как я могу получить этот макет работать? Я не хочу использовать абсолютное позиционирование в представлении, потому что боковая панель или панель приложений могут динамически изменять размер.

HTML

<div id="body"> 
    <div id="appbar">appbar</div> 
    <div id="main"> 
    <div id="sidebar">side</div> 
    <div id="content"> 
     <div id="navbar">nav</div> 
     <div id="view"> 
     This view container should scroll 
     <div id="view-content"> 
     This content makes the view grow too large 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

CSS

#body{ 
    background: #ccc; 
    display:flex; 
    flex-direction: column; 
    position:absolute; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    top:0px; 
} 

#appbar{ 
    height:55px; 
} 

#main{ 
    display: flex; 
    flex:1; 
    background: #ddd; 
} 

#sidebar{ 
    height:100%; 
    background:#660099; 
    width:50px; 
    flex-shrink:0; 
} 

#content{ 
    display:flex; 
    flex:1; 
    flex-direction:column; 
} 

#navbar{ 
    height:20px; 
    background:#3cd; 
} 

#view{ 
    flex:1; 
    background:#126; 
    overflow: auto; 
} 

#view-content{ 
    width:1500px; 
    height:1500px; 
    background: #ff6600; 
}

источник

2016-02-27 Tucker

Для справки, это то, что я хочу, чтобы это выглядело (за исключением того, что я использовал абсолютное позиционирование для представления): http://codepen.io/tuckwat/ pen/RawGJL – Tucker

Ваш код работает. Пожалуйста, добавьте больше содержимого в 'div'' view-content', чтобы увидеть полосу прокрутки. –

Похоже, что он работает в IE (удивительно), но визуально отличается в других браузерах , Chrome был моим целевым браузером. – Tucker

Это довольно странно.

Все три кодекса отсутствуют «переполнение: авто»; для класса вида. Добавление его добавляет именно то, что вы хотели, как показано в абсолютно позиционированном кодефене.

Какой браузер вы используете? (я хотел бы сделать это в комментариях, но я не хватает респ еще.)

источник

2016-02-27 03:19:31 MaskedTwilight

Я только что протестировал в последних IE, Chrome, Firefox и Edge и IE фактически работали, как описано. Три других браузера делают это по-другому (может быть, потому, что я не использовал префиксы). Какой браузер вы используете? – Tucker

другой морщин ... Я нашел аналогичный пост в блоге, которая описывает проблему с раствором: http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout

Когда применяется к моему кодексу, он отлично работает в Chrome и IE, но полосы прокрутки не отображаются в Firefox. Я думал, что дни причуд браузера борьбы закончились ...

http://codepen.io/tuckwat/pen/qZBrya

#body{ 
    overflow: hidden; 
    ... 
} 

#content{ 
    overflow: hidden; 
    ... 
}

Наконец - решение

Я был близок, но Firefox требует мин высоты на Flexbox элементов. Вот ручка, которая работает через IE, Chrome и Firefox: http://codepen.io/tuckwat/pen/oxNZJW

источник

2016-02-27 10:52:01 Tucker

Flexbox child расширяет контейнер вместо переполнения

ответ

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