Child div appear outside of parent div - css

Question

I'm trying to replicate the azure portal design layout. The challenge that I'm facing, is once I'm inside of a component (in the image example "Virtual Machine") I need to ability to create a new component inside of it, but have the style appear that its a new panel in the main panel collection. Any ideas? I've provided a template pen below.
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

you can use a mix of flexbox and 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

you should use display: inline-flex instead of 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

Unless somebody can provide an alternative solution, this table hack is the best I can come up with. Codepen Link
<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>
CSS
table {
border-collapse: collapse;
border-spacing: 0;
}
td {
min-width: 300px;
height:100vh;
padding: 15px;
vertical-align: top;
border: 1px solid black;
}