html基本布局1---div嵌套布局

需求：div3 寬100R% ,高100px,內部包含div1和div2; div1 寬100px,高100px, 如何使div2寬度充滿剩余空間（盡量使用css實現）

解決方案1---彈性盒布局：

        .div3{
            width: 100%;
            height: 100px;
            display: flex;
        }
        .div1{
            width: 100px;
            height: 100px;
            background-color: bisque;
        }
        .div2{
            flex: 1;
            height: 100px;
            background-color: #aaaaaa;
        }

解決方案2---CSS3新屬性 calc：

        .div3{
            width: 600px;
            height: 100px;
        }
        .div1{
            float:left;
            width: 100px;
            height: 100px;
            background-color: bisque;
        }
        .div2{
            float:left;
            width:calc(100% - 100px);
            height: 100px;
            background-color: #aaaaaa;
        }

兼容性參考：

解決方案3---定位+margin：

        .div3{
            text-align: center;
            line-height: 100px;
            width: 100%;
            height: 100px;
        }
        .div1{
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: bisque;
        }
        .div2{
            margin-left: 100px;
            height: 100px;
            background-color: #aaaaaa;
        }

解決方案4---定位+box-sizing：

        .div3{
            text-align: center;
            line-height: 100px;
            width: 100%;
            height: 100px;
            box-sizing: border-box;
            padding-left: 100px;
        }
        .div1{
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: bisque;
        }
        .div2{
            width: 100%;
            height: 100px;
            background-color: #aaaaaa;
        }

如有其他更好的方案，不吝賜教~