div flex panel

by Daehyun Im

HTML

<div class='panel'>
<div class="split left">
  <div class="centered">
  </div>
</div>
<div class='bar'></div>
<div class="split right">
  <div class="centered">
  </div>
</div>
</div>

CSS

#root, body, html {
    height:98%;
}

body {
  font-family: Arial;
  color: white;
}

.panel {
	display:flex;
    height:calc(100% - 4rem);
    width:100%;
}

.split {
  height: 100%;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
  flex: 1 0 0%;
}

.bar {
  height: 100%;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
  background:blue;
  flex: 0.01 0 0%;
}

.left {
  left: 0;
  background-color: #111;
}

.right {
  right: 0;
  background-color: red;
}