html 给一个无限宽,使包含CSS列的div具有无限宽度

想象一下很常见的< header>< article>< footer>布局,页眉和页脚是固定高度,文章根据需要变得高(页面垂直滚动以适应).这就像大多数网页.

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

我最初的尝试使用flexbox：

相关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是理想的