One row and two columns of css adaptive width in the left column

Today, we want to implement the layout of one row and two columns. The width of the left column is adaptive and the width of the right column remains unchanged. The HTML syntax is as follows:
<Div id = "main">
<Div id = "left"> <p> left column </p> </div>
<Div id = "right"> <p> right column </p> </div>
</Div>

When CSS is added, the effect is that the width of the right layer is PX and the width of the left layer remains unchanged. The width of the left layer changes with the change of the main layer. CSS is written as follows:
# Main {width: 100%; background: # CCCCCC ;}
# Left {width: 100%; margin-left:-200px; float: left; background: red ;}
# Right {width: 200px; float: right; background: green ;}

Basically, the desired effect is achieved. # set the width of left to 100%, and add a margin-left:-200px; to move it to the left by 200px, so that it can free up px space into the right layer. However, there is a problem: the 200px column on the left is hidden and you cannot see the content in it. Therefore, you must add a DIV to help you.

Modified the HTML code:
<Div id = "main">
<Div id = "left">
<Div id = "innerLeft"> <p> left column </p> </div>
</Div>
<Div id = "right"> <p> right column </p> </div>
</Div>

Now let innerLeft get the hidden part on the left, so we need to add a margin-left: 200px. The modified CSS code is as follows:
# Main {width: 500px; background: # CCCCCC ;}
# Left {width: 100%; margin-left:-200px; float: left; background: red ;}
# InnerLeft {margin-left: 200px ;}
# Right {width: 200px; float: right; background: green ;}