在窗口调整大小时增加和减少元素宽度

Question

Imagen响应式布局，内容区域以浏览器窗口为中心。

当窗口最小化/最大化时，内容区域应该适合左侧和右侧的剩余空间，因此在较小的屏幕上不会浪费任何空闲空间。

为了实现这一目标，我已经制作了一个可以完成工作的小javascript，但它会导致大量的cpu。

有没有办法用纯css动态扩大或缩小内容区域的宽度？

"use-strict";
(function(){
function init(){
    var foo = new bar(getView());

    function getView(){
        return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    }

    window.onresize = function(){
        foo(getView());
    }
}

function bar(i) {
    return function(y){
        if(y > i)
            console.log('max');

        if(y < i)
            console.log('min');

        i = y;
    }
}

window.addEventListener('load', init, false);
})();

Answer 1

将min-width用于内容区域。

.content { min-width : 200px; width:60%; }

Answer 2

width: 700px;
min-width: 50%;
max-width: 100%;
}

来源并说明： How do you increase element width as you decrease the window size?