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

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

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

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

Answer 3

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

Answer 4

用flex吧,最方便,
下面是一个比较简单的demo,看看合不合适.
(未添加各种浏览器兼容)

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

.wrapper{
    min-width: **px;
    height: 100%;
    display: flex;
}

.left{
    flex: 0 0 固定px;
}

.right{
    flex: 1;
}