css - 多个可滑动侧面板

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)。在半隐藏区域，您还可以看到每个 Pane 的内容，重叠。

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

请问，如何解决？

Answer 1

希望这就是您正在寻找的内容，请引用以下链接。谢谢

将高度添加到 .side-panel.open

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