Блог

У меня есть несколько вложенных гибких полей, которые я хочу использовать для адаптивного веб-сайта, и они правильно работают в firefox, но не в Chrome или IE. Ссылки должны быть в состоянии переноситься так, чтобы они находились друг над другом, когда вы уменьшаете экран.

Ссылки здесь переносятся правильно: http://jsfiddle.net/6796b /

Но когда они находятся в другом гибком поле, они перестают переноситься и переполняться (Примечание: только зеленые «ссылки» не переносятся / не укладываются должным образом. Все остальное работает так, как задумано.): http://jsfiddle.net/3525C/8 /

HTML:

 <div class="header">
    <div class="logo">logo</div>
    <div class="nav">
        <div class="link">link one</div>
        <div class="link">link two</div>
        <div class="link">link three</div>
    </div>
</div>
  

CSS:

 .header {
    text-align: center;
    display: flex; /* If I take this line out the links wrap properly again, but everything else breaks. */
    flex-flow: row wrap;
}
.logo {
    flex: 1 0 auto;
    min-width: 100px;
    background-color: red;
}
.nav {
    flex: 1 0 auto;
    background-color: lightgray;
    text-align: center;
}
.link {
    display: inline-block;
    background-color: green;
}
  

Вы должны применить flex-shrink значение 1 , чтобы гибкий элемент был гибким. См. Редактирование 9.

Значение по умолчанию: flex: 0 1 auto что позволяет гибкому элементу «сжиматься до минимального размера при нехватке места«

В вашем случае настройка flex: 1 0 auto позволяет nav расти, но 0 не позволяет ей уменьшаться даже в ситуациях переполнения (ваш случай здесь с встроенными блоками).

т.е. Если вы хотите, чтобы «все» помещалось в гибкий контейнер, установите для его элементов flex значение flex: auto;

РЕДАКТИРОВАТЬ: изменено flex: 1 1 auto; для flex: auto; соображений совместимости из-за auto возможной замены ключевым словом ‘main-size` в ближайшем будущем.