并列的两个盒子，一个有固定宽度，让另一个占满剩余宽度(grid、calc、外边距、flex)

HTML：

<div class="d">
        <div class="box1"></div>
        <div class="box2"></div>
</div>

CSS：

grid：通过 grid-template-columns:(固定盒子的宽度)px auto 和 grid-column-gap:0 来实现

        * {
            margin: 0;
            padding: 0;
        }

        .d {
            width: 100%;
            height: 200px;

            display: grid;
            grid-template-columns: 200px auto;
            grid-column-gap: 0;
        }

        .box1 {
            height: 100%;
            background-color: rgb(88, 121, 80);
        }

        .box2 {
            height: 100%;
            background-color: rgb(173, 119, 119)
        }

 css计算函数calc()：

        1.第一个盒子设置flot:left,第二个盒子设置flot:right,同时第二个盒子的宽度使用计算函数计算

        2.父级设置flex的情况下，第二个盒子的宽度直接使用计算函数即可

    /* 第一个盒子设置flot:left,第二个盒子设置flot:right,同时第二个盒子的宽度使用计算函数计算 */
        * {
            margin: 0;
            padding: 0;
        }

        .d {
            width: 100%;
            height: 200px;
        }

        .box1 {
            float: left;
            width: 200px;
            height: 100%;
            background-color: rgb(88, 121, 80);
        }

        .box2 {
            float: right;
            width: calc(100% - 200px);
            height: 100%;
            background-color: rgb(173, 119, 119)
        }

/* 父级设置flex的情况下，第二个盒子的宽度直接使用计算函数即可 */
        * {
            margin: 0;
            padding: 0;
        }

        .d {
            display: flex;
            width: 100%;
            height: 200px;
        }

        .box1 {
            width: 200px;
            height: 100%;
            background-color: rgb(88, 121, 80);
        }

        .box2 {
            width: calc(100% - 200px);
            height: 100%;
            background-color: rgb(173, 119, 119)
        }

flex/flex-grow:

        * {
            margin: 0;
            padding: 0;
        }

        .d {
            display: flex;
            width: 100%;
            height: 200px;
        }

        .box1 {
            width: 200px;
            height: 100%;
            background-color: rgb(88, 121, 80);
        }

        .box2 {
            /* flex: 1; */
            flex-grow: 1;
            height: 100%;
            background-color: rgb(173, 119, 119)
        }

外边距：给第一个的盒子设置flot:left，给第二个盒子设置一个左外边距，值为第一个盒子的宽度，第二个盒子宽度为auto

        * {
            margin: 0;
            padding: 0;
        }

        .d {
            width: 100%;
            height: 200px;
        }

        .box1 {
            float: left;
            width: 200px;
            height: 100%;
            background-color: rgb(88, 121, 80);
        }

        .box2 {
            margin-left: 200px;
            /* width: auto; */
            height: 100%;
            background-color: rgb(173, 119, 119)
        }