左侧固定右侧自适应两栏布局

Question

以下六种方案中，只有方案二 flex 布局能保证两栏是等高的；其他方案两栏均不等高。

方案一：float + BFC

  #wrapper {
    overflow: hidden; // 清除浮动
  }

  .left {
    float: left;
    width: 200px;
  }

  .right {
    overflow: hidden; // 触发BFC
  }

方案二：flex （同时两栏等高）

  .wrapper {
    display: flex;
  }
  .left {
    width: 100px;
  }
  .right {
    flex: 1;
  }

方案三： float + margin-left

  #wrapper {
    overflow: hidden; // 清除浮动
  }
  .left{
    float: left;
    width: 100px;
  }
  .right {
    margin-left:100px;
  }

方案四： 双 float

  #wrapper {
    overflow: hidden;
  }

  .left, .right {
    float: left;
  }

  .left {
    width: 100px;
  }

  .right {
    width: calc(100% - 100px);
  }

方案五： 双 inline-block

  .wrapper {
    font-size: 0;
  }
  .left, .right {
    display: inline-block;
    font-size: 14px;
    vertical-align: top;
  }
  .left {
    width : 100px;
  }
  .right {
    width: calc(100% - 100px);
  }

注意： 消除默认的间隙；

方案六： position + margin-left

  .wrapper {
    position: relative;
  }
  .left {
    position: absolute;
    width: 100px;
  }
  .right {
    margin-left: 100px;
  }

问题：绝对定位会脱离文档流，导致父元素不会计算该元素的高度，并且后面兄弟元素会叠加在该元素之上。