javascript - The right column has a fixed width, and the left column is adaptive and has a minimum width

Question

The right column has a fixed width and the left column is adaptive. However, when the window shrinks to a certain extent, the left column will no longer become smaller. If I want to achieve this effect, how should I lay it out?

Answer 1

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

<code>.left{
    float:left;
    display:inline-block;
    ...
}
.right{
    width: 600px;
    ...
}</code>

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

Follow up:

<code>        .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;
        }</code>

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

Answer 2

<code><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;
}
</code>

Answer 3

.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