Flexbox workbook demo

by André Masson

HTML

<div class="wkbRangeContainer">
  <div class="wkbRangeContainerHeader">
    <div class="wkbRangeContainerHeaderFixedCol">
      A1
    </div>
    <div class="wkbRangeContainerHeaderStreatched">
      B1
    </div>
  </div>
  <div class="wkbRangeContainerBody">
    <div class="wkbRangeContainerBodyFixedCol">
      A2
    </div>
    <div class="wkbRangeContainerBodyStreatched">
      B2
    </div>
  </div>
</div>

CSS

.wkbRangeContainer {
  display: flex;
  padding: 5px;
  align-items: stretch;
  height: 400px;
  flex-direction: column;
  justify-content: flex-start;
  flex-wrap: nowrap;
  background-color: lightgrey;
}

.wkbRangeContainerHeader {
  height: 40px;
  padding: 5px;
  display: flex;
  align-items: stretch;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: nowrap;
  background-color: blue;
}

.wkbRangeContainerBody {
  flex-grow: 1;
  background-color: darkblue;

  padding: 5px;
  display: flex;
  align-items: stretch;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.wkbRangeContainerHeaderFixedCol {
  width: 40px;
  background-color: red;
  border: 1px dashed white;
}

.wkbRangeContainerHeaderStreatched {
  flex-grow: 1;
  background-color: orange;
  border: 1px dashed white;
}

.wkbRangeContainerBodyFixedCol {
  width: 40px;
  background-color: darkred;
  border: 1px dashed white;
}

.wkbRangeContainerBodyStreatched {
  flex-grow: 1;
  background-color: darkorange;
  border: 1px dashed white;
}