CSS を使用して、左側に固定幅、右側に適応幅を持つ 2 列レイアウトを実装する複数の方法

.box>div{高さ: 100%;}
#box1>div{float: 左;}
.left1{幅: 100px;背景: 黄色;}
.right1{背景: #09c;幅:calc(100% - 100px);}

<div class="box" id="box1">
    <div class="left1">左の幅を固定</div>
    <div class="right1">右側に適応</div>
</div>

.box{オーバーフロー: 非表示;高さ: 100px;マージン: 10px 0;}
.box>div{高さ: 100%;}
.left2{float: left;background: yellow;width: 100px;}
.right2{背景: #09c;左余白: 100px;}

<div class="box" id="box2">
    <div class="left2">左の幅を固定</div>
    <div class="right2">右側アダプティブ</div>
</div>

.box{オーバーフロー: 非表示;高さ: 100px;マージン: 10px 0;}
.box>div{高さ: 100%;}
.left3{float: left;background: yellow;width: 100px;}
.right3{背景: #09c;オーバーフロー: 非表示;}

<div class="box" id="box3">
    <div class="left3">左の幅を固定</div>
    <div class="right3">右側アダプティブ</div>
</div>

.box{オーバーフロー: 非表示;高さ: 100px;マージン: 10px 0;}
.box>div{高さ: 100%;}
#box4{位置: 相対;}
.left4{位置: 絶対;左: 0;上: 0;幅: 100px;背景: 黄色;}
.right4{マージン左:100px;背景: #09c;}

<div class="box" id="box4">
    <div class="left4">左の幅を固定</div>
    <div class="right4">右側アダプティブ</div>
</div>

.box{オーバーフロー: 非表示;高さ: 100px;マージン: 10px 0;}
.box>div{高さ: 100%;}
#box5{位置: 相対;}
.left5{位置: 絶対;左: 0;上: 0;幅: 100px;背景: 黄色;}
.right5{位置: 絶対;左: 100px;上: 0;右: 0;幅: 100%;背景: #09c;}

<div class="box" id="box5">
    <div class="left5">左の幅を固定</div>
    <div class="right5">右側アダプティブ</div>
</div>

.box{オーバーフロー: 非表示;高さ: 100px;マージン: 10px 0;}
.box>div{高さ: 100%;}
#box6{display: flex;display: -webkit-flex;}
.left6{flex:0 1 100px;背景:黄色;}
.right6{flex:1;背景: #09c;}

<div class="box" id="box6">
    <div class="left6">左の幅を固定</div>
    <div class="right6">右側アダプティブ</div>
</div>

.box{オーバーフロー: 非表示;高さ: 100px;マージン: 10px 0;}
.box>div{高さ: 100%;}
#box7{表示: テーブル;幅: 100%;}
#box7>div{display: テーブルセル;}
.left7{幅: 100px;背景: 黄色;}
.right7{背景: #09c;}

<div class="box" id="box7">
    <div class="left7">左の幅を固定</div>
    <div class="right7">右側アダプティブ</div>
</div>