html

<div class="container">
  <div class="box1">固定寬度</div>
  <div class="box2">自適應寬度</div>
  <div class="box3">自適應寬度高度</div>
</div>

scss

.container {
  height: 200px;
  width: 100%;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.box1 {
  width: 100px;
  height: 100%;
  background-color: red;
  margin-right: 10px;
}
.box2 {
  width: calc(100% - 110px);
  height: 50px;
  background-color: yellow;
}
.box3 {
  flex: auto;
  margin-top: 10px;
  background-color: blue;
}

可以參考這個 Codepen

這個不叫一個居左一個居右吧，應該是：“兩列布局，自適應寬度吧？”

.container
  display1 flex

.col-1
  width 20em

.col-2
  flex 1
  margin-left 1em 

.container
  .col
  .col
    .row
    .row

如果要放在同一級，可以參考這個 Codepen。

.container
  width 200px
  height 200px
  background-color #EEE
  display flex
  flex-direction column
  flex-wrap wrap
  
.block
  
  &:not(:first-child)
    margin-left 10px
    min-height 40%
    flex 1
    
  &:last-child
    margin-top 10px
  
.block-1
  height 100%
  background red

.block-2
  background-color blue
  
.block-3
  background-color orange