javascript - 右列定宽，左列自适应且有最小宽度

Question

右列定宽，左列自适应，但当窗口缩到一定程度，让左列不再变小。我要实现这个效果，怎么布局？

Answer 1

你这左列min-width：300px;当然不会再变小。其实最简单的写法是：

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

而且是这个问题吗？怎么没看到问题呢？

后续：

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

这样应该满足你的需求，但是也不知道最后小于900px你是要怎么呈现，我就直接用滚动条了

Answer 2

雷雷

Answer 3

.con(.l,.r)
.con
display:flex;
flex-wrap:nowrap;
width:100%;
height:xpx;
.l
....
.r
....
应该可以 应该看的懂吧
不过设置定宽还是看你了
flex其实用比例更好