Css flex basis:0，隐藏溢出，笨拙地添加空间

我试图通过转换flex和flex-basis属性，暂时将一些内容隐藏在视图之外

下面的链接是对我遇到的问题的一个过于简化的演示。查看第一项如何继承额外空间。。。

项目
项目

项目

项目
.盒子{
显示器：flex；
柔性包装：包装；
}
.项目{
弹性：1050%；
背景：番茄；
溢出：隐藏；
}
.first{flex:01100%；}
.second{flex:0；}
.forth{flex:01100%；}

这里的第二个链接更接近于我试图实现的目标，但仍然演示了添加额外空间的问题

---

如果您能就发生这种情况的原因或如何解决提出任何建议，我们将不胜感激。：）

在第二个链接中，单击按钮后添加的空格是由第二个div

引起的，因为从技术上讲，它仍然是正常流程的一部分。解决方法是在单击按钮后“删除”第二个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.*/
  }
}

---

希望这对你有用

在第二个链接中，单击按钮后添加的空格是由第二个div

引起的，因为从技术上讲，它仍然是正常流程的一部分。解决方法是在单击按钮后“删除”第二个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.*/
  }
}

---

希望这对你有用

这是我提出的一个可能的解决方案，尽管它让人感觉很粗糙，我希望有更优雅的东西

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

<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%);
}

项目

项目

.第二个货柜{
过渡属性：最大高度，变换；
过渡定时功能：易进易出；
过渡时间：2s；
变换：translateX（0）；
最大高度：1000px；
宽度：200px；
溢出：隐藏；
}
第二个容器{
最大高度：0；
转化：translateX（-100%）；
}

这是我提出的一个可能的解决方案，尽管它感觉很粗糙，我希望有更优雅的东西

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

<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%);
}

项目

项目

.第二个货柜{
过渡属性：最大高度，变换；
过渡定时功能：易进易出；
过渡时间：2s；
变换：translateX（0）；
最大高度：1000px；
宽度：200px；
溢出：隐藏；
}
第二个容器{
最大高度：0；
转化：translateX（-100%）；
}

对于最终状态，这肯定是可行的，但这种方法在过渡过程中产生的突然间隙正是我试图解决的问题。我在转换“最大高度”（max height）方面取得了一些成功，但它似乎起了作用。在某些渲染步骤中，它会给我带来一些奇怪的闪烁。至于最终状态，这肯定会起作用，但这种方法在转换过程中产生的突然间隙正是我试图解决的问题。我在转换“最大高度”（max height）方面取得了一些成功，但它似乎起了作用，在一些渲染步骤中，它会让我出现一些奇怪的闪烁。