CSS -- 容器内两部分，一部分固定宽度，另一部分自动占满剩余宽度的方法

[yaoningvital]

1、场景

<div class='container'>
     <div class='part1'></div>
     <div class='part2'></div>
</div>

假设上面container宽度不固定，part2有固定宽度 200px，想要让 part1 自动适应占满剩余的宽度。

2、方法

采用flex 布局：

.container{
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: space-between;
}
.part2 {
     width: 200px;
}
.part1 {
     flex: 1;
}