css两列布局，左边固定，右边自适应的几种方法

css两列布局，左边固定，右边自适应

 

html

  <div>
    <div class="box">
      <div class="box1">1</div>
      <div class="box2">2</div>
    </div>

    <div class="box2">
      <div class="box1">1</div>
      <div class="box2">2</div>
    </div>

    <div class="box3">
      <div class="box1">1</div>
      <div class="box2">2</div>
    </div>
    <div class="box4">
      <div class="box1">1</div>
      <div class="box2">2</div>
    </div>
  </div>

css

// 方法一：flex
.box{
    display:flex;
}
.box .box1{
    width:200px;
    background:red;
}
.box .box2{
    flex:1;
    background:green;
}

// 方法二：float
.box2 .box1{
    float:left;
    width:200px;
    background:red;
}
.box2 .box2{
    margin-left:200px;
    background:green;
}
// 方法三：grid
.box3{
   display:grid;
   grid-template-columns: 200px 1fr;
}
.box3 .box1{
    background:red;
}
.box3 .box2{
    background:green;
}

// 方法四：position
.box4{
   position:relative;
}
.box4 .box1{
    position:absolute;
    width:200px;
    left:0;
    background:red;
}
.box4 .box2{
    position:absolute;
    left:200px;
    width:100%;
    background:green;
}

暂时只想到这几种方法，欢迎评论更多方法