（自用面试题）两栏布局，右侧自适应如何实现？

考频：
高频。

定义：
两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满。

1. flex布局
   容器display设置为flex，左边子元素设置为固定宽度，右边子元素flex设置为1。

<style>
    .box{
        display: flex;
    }
    .left {
        width: 100px;
    }
    .right {
        flex: 1;
    }
</style>

<div class="box">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

2. grid网格布局
   容器display设置为grid，grid-template-columns设置为固定宽度 1fr。