多个可滑动侧面板

Question

我正在尝试创建 多个可滑动的侧面板，隐藏在屏幕右侧之外。

Here the prototype（我将它们“几乎”翻译到右侧之外，以便更好地理解行为）。

代码的相关部分是：

.container {
  display:flex;
  flex-direction:column;
  position:absolute;
  top:0;
  right:0;
  width:200px;
  height:100%;
  transform:translateX(150px);      /*Should be 170px to place outside view*/
}

.side-panel {
  display:flex;
}

.side-panel.open {
  transform:translateX(-170px);
}

.content {
  position:absolute;
  top:0;
  right:0;
  width:calc(100% - 34px);
  height:100%;
}

如您所见，有 3 个侧面板，每个面板都可通过点击其黄色标签打开（表示广告 1、2、3）。在半隐藏区域，您还可以看到每个窗格的内容，重叠。

目标应该是 .toggle 标签应该像示例中那样堆叠，但它们的内容应该填满容器的整个高度（可以看到当面板向右关闭时，这种情况下的内容是由于它们的position:absolute，有效地重叠，但是当您打开其中一个时，它将被限制在其直接的 flex 容器中），就像您在它们关闭时看到的那样。

请问，如何解决？

Answer 1

希望这是您要查找的内容，请参阅以下链接。谢谢

增加了.side-panel.open的高度

https://jsfiddle.net/wyn7b8rx/1/88