css-two Div side, left div wide fixed, right adaptive workaround

<div class= "Container" >
<div class= "left" ></div>
<div class= "right" ></div>
</div>

<style>
/* Method One: BFC (block-level formatting context) */
. container{
width:1000px;height:400px;border:1px solid red;
}
. left{
Width:200px;height:100%;background:gray;
Float:left;
}
. right{
Overflow:hidden; /* Trigger BFC */
Background:green;
}

/* Method Two: Flex layout */
. container{
width:1000px;height:400px;border:1px solid red;
Display:flex; /*flex Layout */
}
. left{
width:200px; Height:100%;background:gray;
Flex:none;
}
. right{
Height:100%;background:green;
Flex:1; /*flex Layout */
}

/* Method Three: Table layout */
. container{
width:1000px;height:400px;border:1px solid red;
display:table; /*table Layout */
}
. left{
width:200px; Height:100%;background:gray;
Display:table-cell;
}
. right{
Height:100%;background:green;
Display:table-cell;
}

/* Method Four: CSS calculation width calc*/
. container{
width:1000px;height:400px;border:1px solid red;
}
. left{
Width:200px;height:100%;background:gray;
Float:left;
}
. right{
Height:100%;background:green;
Float:right;
Width:calc (100%-200px);
}
/* Method Five: Margin-left Way */
. container{
width:1000px;height:400px;border:1px solid red;
}
. left{
float:left;width:200px;border:1px solid Red;height:100%;background:gray;
}
. right{
height:100%;border:1px solid blue;width:auto;margin-left:200px;
}
</style>

css-two Div side, left div wide fixed, right adaptive workaround