cssのdisplay: flex;で隙間なく3分割する方法

Tweet

Pocket

cssのdisplay: flex;で隙間なく3分割するには、以下のように書きます。

.box2 {
    width: calc(100% * 2/3);
}
.box1 {
    width: calc(100% / 3);
}

.box2が2/3、.box1が1/3のwidthです。.box2に66%、.box1に34%と指定しても、余白ができてしまい綺麗に表示されません。