Гибкая термоусадка во вложенных контейнерах

Question

Я пытаюсь имитировать c панель навигации с флекс-боксом, где у меня есть 2 набора элементов: навигация по левому краю по левому краю и навигация по правому краю по правому краю. Каждый элемент имеет ширину 50 пикселей.

nav-right должен принимать ширину дочерних элементов. nav-left должен занять оставшуюся часть пространства.

https://jsbin.com/xanaxaruxo/edit?html, css, вывод

.nav-group {
  display: flex;
  flex-direction: row;
  border: 2px solid;
  padding: 2px;
}

.nav-group-left {
  border-color: turquoise;
  flex: 1 1 auto;
}

.nav-group-right {
  border-color: lime;
  flex: 0 1 auto;
}

Я ожидаю, что это -

Контейнер nav-left должен занять доступное пространство, но когда я сжимаюсь, это пространство должно сначала уменьшаться, но когда total больше, чем контейнер - все элементы должен сжаться вместе.

Я поставил flex: 1 1 auto - но элементы переполняют контейнер; (2-й бар)

Но это работает, когда гибкие контейнеры не вложены.

https://jsbin.com/bapaqecabe/edit?html, css, вывод

Мой вопрос поэтому не сжимает работу с вложенными гибкими контейнерами.

Answer 1

Не работает, когда элементы вложены, потому что они имеют определенную ширину. Их родители имеют гибкую основу auto и shrink, установленную на true, они делают то, что должны, но их дети будут расширять их независимо.

Если вам требуется, чтобы ваши элементы навигации имели ширину stati c Одно из решений, которое я часто использую, состоит в том, чтобы они отображались в виде списка на небольших устройствах.

Если вам хорошо, когда они немного уменьшаются, вы можете сделать их гибкими, установить их основу на 50px, и измените оба контейнера, чтобы они росли, но левый больше, чем правый, скажем, от 3 до 1.

.nav-group-left {
  border-color: turquoise;
  flex: 3 1 auto;
}

.nav-group-right {
  border-color: lime;
  flex: 1 1 auto;
}

.item {
  border: 3px solid;

  display: flex;
  flex-basis: 50px;
}

Пример

Answer 2

Явное width переопределит flex-grow и flex-shrink. Чтобы flex-grow и flex-shrink работали, их прямой родительский элемент должен быть установлен на display: flex;. Их ширина будет отображаться относительно ширины их содержимого.

<div style="display: flex;">
<div style="flex-grow: 1;"><p>Div should use up remaining space.</p></div>
<div style="flex-shrink: 1;"><p>Div should shrink to minimal space.</div>
</div>

Используйте flex-grow, когда у вас есть элемент (обычно display: inline;), чтобы использовать оставшуюся часть пространства (например, * 1014). * которые вы используете для мета-описаний).

Используйте flex-shrink для элементов (обычно display: block;), которые вы не хотите использовать больше, чем равная доля пространства.