左DIV宽度固定，右DIV适应剩下的宽度

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

记录下两种方法：

方法一：

.box {
    width: 200px;
    display: flex;
}

.left {
    background-color: red;
    width: 50px;
}

.right {
    background-color: yellow;
    flex-grow: 1;
}

这种方法有一个问题，当右边的内容超过宽度，左边会压缩到只显示内容。暂时不知道解决的办法。

方法二：

.box {
    width: 200px;
    overflow: hidden;
}

.left {
    background-color: red;
    width: 50px;
    float: left;
}

.right {
    background-color: yellow;
    width: calc(100% - 50px);
    float: left;
}