左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;
}