flex父母将赢得过去的儿童内容，即使孩子的宽度为0

Question

请考虑以下示例：

.flexer {
  display: inline-flex;
  border: 1px solid red;
  min-width: 0;
}
.extra {
  flex: 0 1 0%; /* flex-grow: 0; flex-shrink: 1; flex-basis: 0%; */
  min-width: 0;
  transition: flex-grow .3s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.flexer:hover .extra {
  flex-grow: 1
}

<div class="flexer">
  <div>
     test
  </div>
  <div class="extra">
    extra
  </div>
</div>

<hr>
<div class="flexer">
  <div>
     test
  </div>
</div> - How it should look, when not hovered
<br>
<div class="flexer">
  <div>
     test
  </div>
  <div>
    extra
  </div>
</div> - How it should look, when hovered
<br><br>
The red box should animate smoothly and precisely between the two widths (without delay).

我很难理解为什么.flexer（父）不悬停时不会收缩（例如：红色框仍然保持满，而不是围绕test test）。

从此 q/a 我理解添加min - 宽：0给孩子应允许父母收缩。我将其添加到孩子和父母，无济于事。

注1：我更感兴趣地了解机制以及为什么会发生这种情况，而不是找到替代解决方案（JavaScript，绝对定位等...）。
我想使用FlexBox，并且想动画Flex -Grow - 或任何其他动画Flex Prop-对于这种情况，如果可能的话。

注2：标记是无关紧要的（我愿意更改它 - 例如：在任何孩子中添加包装器，如果这会使我的示例起作用）。

注意3：有关对所需输出的更清晰的了解，请参见我意识到仅使用CSS不可能的基于JS的答案。

感谢您调查。

Answer 1

这是我的尝试

.flexer {
  display: inline-flex;
  border: 1px solid red;
  min-width: 0;
}
.extra {
  flex: 0 1 0%; /* flex-grow: 0; flex-shrink: 1; flex-basis: 0%; */
  width: 0;
  transition: flex-grow .3s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}

.flexer:hover .extra {
  flex-grow: 1;
  width: 100%; /* you can also use 'auto' value */
}

<div class="flexer">
  <div>
     test
  </div>
  <div class="extra">
    extra
  </div>
</div>

Answer 2

您正好在正轨。只需将width：0;添加到.extra并删除min Width。然后将width用于.extra on ：Hover fit-content或auto 。

.flexer {
  display: inline-flex;
  border: 1px solid red;
}

.extra {
  flex: 0 1 0%;
  /* flex-grow: 0; flex-shrink: 1; flex-basis: 0%; */
  transition: flex-grow .3s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  width: 0;
}

.flexer:hover .extra {
  flex-grow: 1;
  width: fit-content;
}

<div class="flexer">
  <div>
    test
  </div>
  <div class="extra">
    extra
  </div>
</div>

Answer 3

您将没有任何机会使用flex-Grow或flex-basis，因为通过设计，这些属性需要知道可行的容器维度。他们无法更新容器尺寸。

您可以做的是使用width/最大宽度，因为这些>可能会影响容器尺寸。

.flexer {
  display: inline-flex;
  border: 1px solid red;
}
.extra {
  min-width: 0;
  max-width: 0;
  transition: .3s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.flexer:hover .extra {
  max-width: 100px;
}

<div class="flexer">
  <div>
     test
  </div>
  <div class="extra">
    extra
  </div>
</div>

或考虑CSS网格，但这在所有浏览器中都无法使用。我认为现在只有Firefox：

.flexer {
  display: inline-grid;
  grid-template-columns: auto 0fr;
  justify-content: start;
  border: 1px solid red;
  transition: .3s cubic-bezier(.4, 0, .2, 1);
}

.extra {
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.flexer:hover {
  grid-template-columns: auto 1fr;
}

<div class="flexer">
  <div>
    test
  </div>
  <div class="extra">
    extra
  </div>
</div>

Answer 4

从到目前为止的所有答案来看，我了解到使用Flexbox的所有孩子的计算宽度时，没有干净的CSS方法可以根据所有儿童的计算宽度来减少父母的大小，而孩子们则在动画时。

从技术上讲，这意味着Flexbox Props（-shrink，-basis，-grow）无法在此处动画和（（最大宽度应该使用。我必须承认，我仍然很难相信。我以为Flexbox涵盖了这个问题。

动画<代码>最大宽度或width的问题是，您无法从0到auto> auto没有JavaScript。

导致以下解决方案：

[...document.querySelectorAll('.flexer')].forEach(el => {
  const item = el.querySelector('.extra');
  if (item) {
    el.onmouseenter = () => {
      item.style.maxWidth = item.scrollWidth + 'px'
    }
    el.onmouseleave = () => {
      item.style.maxWidth = '0'
    }
  }
})

.flexer {
  display: inline-flex;
  border: 1px solid red;
}
.extra {
  transition: max-width .42s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  max-width: 0;
  white-space: nowrap;
}

<div class="flexer">
  <div>
    test
  </div>
  <div class="extra">
     extra
  </div>
</div>

<div class="flexer">
  <div>
    test
  </div>
  <div class="extra">
     I have a lot more content...
  </div>
</div>

不用指出的是，如果任何人都有纯CSS解决方案，从0到每个项目的适当宽度完美地动画，我很乐意将其答案标记为接受。

到目前为止，提供的答案都没有所需的输出，除了使用JavaScript的答案。

Answer 5

<div class="flexer">
  <div>
     test
  </div>
  <div class="extra">
    extra
  </div>
</div>

.flexer {
  display: inline-flex;
  border: 1px solid red;
}
.extra {
  flex: 0 1 0%;
  transition: flex-grow .3s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
  width: 0;
}
.flexer:hover .extra {
  flex-grow: 1;
  width: auto;
}