子div出现在父div之外

Question

我正在尝试复制天蓝色的门户网站设计布局。我面临的挑战是，一旦我进入一个组件（在图像示例“虚拟机”中）我需要能够在其中创建一个新组件，但是它的样式看起来是一个新面板在主面板集合中。有任何想法吗？我在下面提供了一个模板笔。

Codepen Link

<section id="panel-container">
  <div class="panel" style="border:1px solid red;"></div>
  <div class="panel" style="border:1px solid red;">
    <div class="sub-panel" style="border:4px solid cyan;"></div>
  </div>
</section>

Answer 1

您可以混合使用flexbox和position

*,
*::before,
*::after {
  box-sizing: border-box
}

body {
  margin: 0
}

#panel-container {
  overflow-x: hidden;
  height: 100vh;
  border: 1px solid black;
  display: flex;
}

.panel {
  flex: 0 450px;
  height: 100vh;
  display: flex;
  border: 1px solid red;
  position: relative;
}

.sub-panel {
  position: absolute;
  top: 0;
  left: 450px;
  width: 450px;
  height: 100vh;
  border: 4px solid cyan;
}

<section id="panel-container">
  <div class="panel"></div>
  <div class="panel">
    <div class="sub-panel"></div>
  </div>
</section>

Answer 2

您应该使用display: inline-flex代替display: inline-block。

#panel-container {
  overflow: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  height: 100vh;
  border: 1px solid black;
}

.panel {
  position: relative;
  display: inline-flex;
  width: 250px;
  height: 100vh;
}

.sub-panel {
  width: 250px;
  height: 100vh;
}

<section id="panel-container">
  <div class="panel" style="border:1px solid red;"></div>
  <div class="panel" style="border:1px solid red;">
    <div class="sub-panel" style="border:4px solid cyan;"></div>
  </div>
</section>

Answer 3

除非有人能提供替代解决方案，否则这个表黑客是我能想到的最好的解决方案。 Codepen Link

app.use(
  connection(mysql,{
       host:'localhost',
       user:'root',
       password:'',
       port:3306,
       database:'stores'
   },'single')
);

app.use('/', routes);
app.use('/users', users);

CSS

<table>
  <tr>
    <td>Panel</td>
    <td>Panel
      <td style="width: 600px;background:red;">Sub Panel</td>
      <td>Sub Sub Panel</td>
    </td>
    <td>Panel</td>
  </tr>
</table>