css左右布局-左适应内容、右自适应

左右自适应布局，此处仅列举三种常用的方式：grid、flex、float。

grid

.container{
  display: grid;
  grid-template-columns: min-content auto;
  grid-template-areas: "a b";
  .left{
    grid-area: a;
  }
  .right{
    grid-area: b;
  }
}

flex

.container{
  display: flex;
  .right{
    flex: 1 1 auto;
  }
}

float

.container{
  &::after{
    content:"";
    clear:both;
  }
  .left{
    float: left;
  }
}