为什么flex-grow在包裹的兄弟姐妹旁边不起作用？

Question

我有一个有两个子div的父div。第二个孩子设置为弹性成长。除非文本在第一列中包含换行符，否则效果很好。在这种情况下，它留下了很大的空白空间。为什么会这样，并且可以解决？

这是我期望的结果：

这是实际发生的情况：

body {
  font-family: sans-serif;
}

.parent {
  display: flex;
  max-width: 225px;
  border: 1px solid green;
  padding: 3px;
}

.parent > div {
    border: 1px solid red;
    pading: 3px;
    padding: 2px;
  }

.child2 {
  flex-grow: 1;
  display: flex;
  align-items: center;
}

<div class="parent">
  <div class="child1">
  Short
  </div>
  <div class="child2">
  +
  </div>
</div>

<div class="parent">
  <div class="child1">
  Long NamedItem Thingamagig AnotherBigLong WordHere1234
  </div>
  <div class="child2">
  +
  </div>
</div>

<br>

Why is this space here ↑

Answer 1

因为您的字符串很长。 将word-break: break-all添加到.parent > div，您将了解发生了什么。

您将要通过以下方式调整.child1：

flex-grow: 0;
flex-shrink: 0;
flex-basis: 0;

或者也许

flex-grow: 0;
flex-shrink: 0;
flex-basis: 80%;

（我放这个语法是因为它与IE更好地配合使用）