flexbox layout

by camel2243

HTML

<div class="container">
  <div class="sidebar">sidebar</div>
  <div class="content">content</div>
</div>

CSS

.container {
  display: flex;
  height: 100vh;
}

.sidebar, .content {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  padding: 0 10px;
}

.sidebar {
  background: gray;
  flex-basis: 200px;
}

.content {
  flex-basis: 300px;
  flex-grow: 1;
  flex-shrink: 1;
  background: lightblue;
}