我想要得到的是一个这样的布局,但是在它的一边,所以文章根据需要变宽,页面水平滚动：

我最初的尝试使用flexBox：

Here is my first attempt on jsFiddle.

相关CSS：

body {
    display: flex;
    position: absolute;
    height: 100%;
}
header {
    background: green;
    width: 400px;
    flex: none;
}
article {
    background: #CCC;
    -webkit-columns: 235px auto;
    columns: 235px auto;
    -webkit-column-gap: 0;
    column-gap: 0;
}
footer {
    background: yellow;
    width: 450px;
    flex: none;
}

但是,我正在尝试其他的事情,比如in this fiddle,这是一个更接近的地方.这个尝试的问题是文章宽度被限制在视口宽度的100％,即使文本流向右边！ (我的文章使用对我的布局绝对重要的CSS列.)

我的要求是：

>标题,文章,页脚要高100％(完成)
>标题为400px宽(完成)和左边的内容(完成)
>页脚宽度为450像素(完成)和文章右侧(如何？)
>文章要广泛,不需要重叠的页脚(怎么样？)

所以,我需要帮助大胆的目标.我可以做什么来保持文章与页脚重叠？是否有其他方法来布局这个页面,以使文章宽度随内容的扩展？

>应该在Chrome,Firefox和Safari中工作(IE和Opera一个加号,但不是必需的)
>最好没有JavaScript(或CSS功能可能会从规范中删除)
>简单,干净的CSS是理想的