Demo: CSS3 Flexible Box

<div class='example'>
  <div class='content'>Some great content</div>
  <div class='sidebar'>A sidebar</div>
</div>

.example
  .content Some great content
  .sidebar A sidebar

@import "https://compass-style.org/files/examples/compass/css3/compass/css3";
.example {
  @include display-box;
  @include box-orient(horizontal);
  @include box-align(stretch);
  @include box-direction(reverse);
  height: 200px;
  width: 100%;
  .content, .sidebar {
    padding: 20px;
  }
  .content {
    @include box-flex(4);
    background-color: #c5c1b4;
  }
  .sidebar {
    @include box-flex(1);
    background-color: #375f99;
    margin-right: 1px;
  }
}

@import https://compass-style.org/files/examples/compass/css3/compass/css3
.example
  +display-box
  +box-orient(horizontal)
  +box-align(stretch)
  +box-direction(reverse)
  height: 200px
  width: 100%
  .content, .sidebar
    padding: 20px
  .content
    +box-flex(4)
    background-color: #C5C1B4
  .sidebar
    +box-flex(1)
    background-color: #375F99
    margin-right: 1px

.example {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: box;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  -ms-box-align: stretch;
  box-align: stretch;
  -webkit-box-direction: reverse;
  -moz-box-direction: reverse;
  -ms-box-direction: reverse;
  box-direction: reverse;
  height: 200px;
  width: 100%;
}
.example .content, .example .sidebar {
  padding: 20px;
}
.example .content {
  -webkit-box-flex: 4;
  -moz-box-flex: 4;
  -ms-box-flex: 4;
  box-flex: 4;
  background-color: #c5c1b4;
}
.example .sidebar {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-box-flex: 1;
  box-flex: 1;
  background-color: #375f99;
  margin-right: 1px;
}