flex-basis: 0 with overflow hidden 笨拙地增加空间

Question

我正在尝试通过转换 flex 和 flex-basis 属性来暂时隐藏一些内容。

以下链接是对我遇到的问题的过度简化演示。看看第一项如何继承额外的空间...... http://codepen.io/mr_webster/pen/BWNWKo

<div class="box">
<div class="item first">item</div>
<div class="item second">
<p>item</p>
</div>
<div class="item third">
<p>item</p>
</div>
<div class="item forth">item</div>
</div>

.box {
display: flex;
flex-wrap: wrap;
}

.item {
flex: 1 0 50%;
background: tomato;
overflow: hidden;
}

.first { flex: 0 0 100%; }
.second { flex: 0 0 0; }
.forth { flex: 0 0 100%; }

这里的第二个链接更符合我想要实现的目标，但仍然演示了添加额外空间的问题。 http://codepen.io/mr_webster/pen/oZXBMd

任何关于为什么会发生这种情况或如何解决它的建议将不胜感激。 :)

Answer 1

这是我想出的一个可能的解决方案，虽然它感觉很老套，我希望有更优雅的东西。 http://codepen.io/mr_webster/pen/mWJzRR

我正在转换容器元素的最大高度和变换。

<div class="item second">
  <div class="second-container">
    <p>item</p>
    <p>item</p>
  </div>
</div>

.second-container {
  transition-property: max-height, transform;
  transition-timing-function: ease-in-out;
  transition-duration: 2s;
  transform: translateX(0);
  max-height: 1000px;
  width: 200px;
  overflow: hidden;
}

second-container {
  max-height: 0;
  transform: translateX(-100%);
}

Answer 2

在您的第二个链接中，单击按钮后添加的空间是由第二个 div <div class="item second"> 引起的，因为从技术上讲，它仍然是正常流程的一部分。解决此问题的方法是在单击按钮后“删除”第二个 div。对您的代码进行以下编辑：

.box {
  display: flex;
  flex-wrap: wrap;
  background: tomato; /*add background color to your .box. This is needed for animation reasons*/
}

.box.toggle {
  .second {
    flex: 0 1 0%;
    height: 0; /* This hides the second div and removes the space you're referring to.*/
  }
}

希望这对你有用。