CSS flexで残りの幅を指定する方法【100% - ○px は可能!】

2列のボックスを作り、ある1方には幅を指定し、もう1方には残りの幅を指定したいときありますよね。

そんな「CSS flexで残りの幅を指定する方法」を説明します。

方法1. 1方の幅が決まっているときはcalcを使う

1方の幅が決まっているとき、残りの幅は「calc」を使いましょう。
calcとは数値を計算式で指定できるCSSです。
違う単位のものを計算できるのがミソです。

実証

まずdisplay:flexを使って2列のボックスをつくります。

html

<div class="flex-wrap">
    <div class="left-column">左メニュー</div>
    <div class="right-column">右本文</div>
</div>

CSS

.flex-wrap{
    display: flex;
    border: 1px solid #999;
    padding: 5px;
}
.left-column,.right-column{
    border: 1px solid #999;
}

この状態では右列も左列も左寄りなのでそれぞれに幅を指定したいところです。

左列は横幅固定にします。

.left-column{
    width: 150px;
}

ここからが本題です。
右列はcalcを使い、「全体（100%）-左列（150px）」を指定します。

.right-column{
    width: calc(100% - 150px);
}

完成形がこちら
ブラウザ幅を変えて確かめてみてください。
右列がレスポンシブになっているのがわかると思います。

完成CSS（htmlは同じ）

.flex-wrap{
    display: flex;
    border: 1px solid #999;
    padding: 5px;
}
.left-column,.right-column{
    border: 1px solid #999;
}

.left-column{
    width: 150px;
}
.right-column{
    width: calc(100% - 150px);
}

calcがうまくいかないときはこちらの記事をごらんください。

方法2. 1方の幅が決まっていないときは100%にする

左の列が中の文字量に応じて可変させ、右は残りの幅にしたいときです。

1. display:flexで横に並べ2段にならないようにします。
2. 左はwhite-space: nowrapで改行されないようにします。
3. 右をwidth: 100%にします。

完成イメージ

html

<div class="flex-wrap2">
    <div class="left-column2">左メニュー</div>
    <div class="right-column2">右本文</div>
</div>

CSS

.flex-wrap2{
    display: flex;
    border: 1px solid #999;
    padding: 5px;
}
.left-column2{
    white-space: nowrap;
    border: 1px solid #999;
}
.right-column2{
    width: 100%;
    border: 1px solid #999;
}

上の一例だとたまたまな可能性があるのでいくつか例を挙げます。

まとめ

方法1. 1方の幅が決まっているときはcalcを使う

方法2. 1方の幅が決まっていないときは100%にする

以上、CSSで残りの幅を指定する方法の説明でした。