The min-width of your left column: 300px; of course it will not get smaller. In fact, the simplest way to write it is:

.left{
    float:left;
    display:inline-block;
    ...
}
.right{
    width: 600px;
    ...
}

And is this the problem? Why don't you see the problem?

Follow up:

        .wrapper{
            width:100%;
            position:relative;
            overflow: scroll;
            min-width: 900px;
        }
        .left{
            min-width: 300px !important;
            position: absolute;
            right: 600px;
            background-color: yellow;
            height:500px;
            width: 100%;
        }
        .right{
            width: 600px;
            height:500px;
            float: right;
            background-color: red;
        }

This should meet your needs, but I don’t know how you want to present the final size less than 900px, so I just use the scroll bar

<p class="wrapper">
    <p class="left"></p>
    <p class="right"></p>
</p>

.wrapper{
    position:relative;
    height:auto;
    padding-right: 600px;
    min-width: 900px;
    -webkit-box-sizing:border-box ;
    box-sizing:border-box ;
}

.right{
    position:absolute;
    right:0px;
    top:0px;
    width: 600px;
    min-height: 100%;
    height:auto;
    background: #000;
}

.left{
    position: relative;
    background: #c0c0c0;
    height: 400px;
}

.con(.l,.r)
.con
display:flex;
flex-wrap:nowrap;
width:100%;
height:xpx;
.l
....
.r
... ..
You should be able to understand it
But it’s up to you to set the fixed width
flex is actually better to use proportions