CODEWITHSUNDEEP
cssangular
Nick
Nick

Reputation: 592

Child div appear outside of parent div

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.

enter image description here

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>

Upvotes: 0

Views: 801

Answers (3)

Nick
Nick

Reputation: 592

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

Upvotes: 0

dippas
dippas

Reputation: 60563

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>

Upvotes: 1

Pengyy
Pengyy

Reputation: 38171

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>

Upvotes: 0

Related Questions