柔性收缩在嵌套容器中

Question

我正在尝试使用带有弹性框的导航栏模拟导航栏，其中有2套项目-导航左侧向左对齐，导航右侧向右对齐。每个项目的宽度均为50px。

导航权应占据孩子的宽度。导航左侧应占据其余空间。

https://jsbin.com/xanaxaruxo/edit?html,css,output

.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;
}

我的期望是-

左侧导航容器应占用可用空间，但是当我缩小容器时，该空间应首先缩小，但是当total大于容器时，所有元素都应一起缩小。

我放了flex：1 1 auto-但是元素溢出了容器； （第二栏）

但是当未嵌套flex容器时，它可以工作。

https://jsbin.com/bapaqecabe/edit?html,css,output

我的问题是为什么不能收缩嵌套Flex容器的工作。

Answer 1

当项目嵌套时，由于它们具有定义的宽度，因此不起作用。他们的父母将自动的弹性基础和收缩设置为true，他们按照应有的方式做，但是无论如何，他们的孩子都会扩大他们。

如果您要求导航项的宽度固定不变，那么我看到的一种经常使用的解决方案是让它们在较小的设备上显示为列表。

如果您对它们略微缩小感到满意，则可以使它们灵活一些，将它们的基础设置为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;
}

Example

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;）时，请使用input。

将flex-shrink用于您不想 要用光超过其均等空间份额的元素（通常为display: block;）。