Question

我有一个想要最大化的物品。我尝试执行此操作的方法是转换flex-grow。除了我的特定用例，我还有一些代码无法按我期望的方式工作：

div {
  display: flex;
  flex-direction: column;
  border: 1px solid #A8F;
}

span {
  flex-basis: 0px;
  flex-grow: 0;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid #8AF;
}

span.selected {
  flex-basis: 0px;
  flex-grow: 1;
  border: 1px solid #FA8;
}

<div>
  <span>Item 1</span>
  <span class="selected">Item 2</span>
</div>

如果运行上面的代码，您将看不到任何东西，这就是问题所在。类别为selected的项目似乎应该使用flex-grow: 1吞噬它所需的所有空间，但它始终保持在0px。

为什么此CSS导致高度为0px的东西？

编辑：对于任何尝试做与我相同的事情的人，我的解决方案最终是使用一些js求和所有跨度的高度，并将div的高度设置为open的高度，以及所选高度的高度项目关闭。通过控制flex-grow / shrink，可以很好地对其进行动画处理。

Answer 1

使用flex-direction: column;和其他flex设置，但没有容器高度，浏览器不知道该容器有多高。对于flex-direction:row;来说，这不是问题，因为高度没有被修改。

您可以添加高度或最小高度，以便所选项目知道可以增长多高。

div {
  display: flex;
  flex-direction: column;
  border: 1px solid #A8F;
  min-height: 100px;
}

span {
  flex-basis: 0px;
  flex-grow: 0;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid #8AF;
}

span.selected {
  flex-basis: 0px;
  flex-grow: 1;
  border: 1px solid #FA8;
}

<div>
  <span>Item 1</span>
  <span class="selected">Item 2</span>
</div>

项目的CSS`flex-basis：0px; flex-grow：1;`停留在0px且没有增长

1 个答案: