Css 滚动条未出现在2列流体宽度布局中

我使用的是2列div布局，其中左、右列的宽度都是不确定的。左列div保存一个图像。右边的div列包含一个header div和一个text content div。左列图像的宽度优先于右列，右列根据宽度获得边距。这两列都位于一个div容器内，该容器具有固定的高度（和宽度，但这并不重要）。此布局正在使用以下代码工作：

.container {
    height: 200px;
    border: 1px solid black;
    overflow: hidden;
}
.left {
    float: left;
}
.right {
    overflow: hidden;
}
.scrollable-content-header {
    font-size: 25px;
    border-bottom: 1px solid black;
}
.scrollable-content {
    font-size: 18px;
    overflow: auto;
}

如果文本内容div溢出容器高度，则它应该是可滚动的。但是我无法使滚动条显示在

.scrollable content

元素上。以下是一些HTML：

<div class="container">

    <div class="left">
        <img id="image" src="http://www.webresourcesdepot.com/wp-content/uploads/image/css-icon.png"/>
    </div>

    <div class="right">
        <div class="scrollable-content-header">Lorem Ipsum</div>
        <div class="scrollable-content">
            Lorem ipsum dolor sit amet, consectetur... etc.
        </div>
    </div>

</div>

乱数假文
我爱你，我爱你。。。等

如果

容器

元素具有

溢出：自动

而不是隐藏，则会出现一个滚动条。但它允许滚动整个容器。我不希望这样，只有

.scrollable内容

应该是可滚动的，不包括标题。我假设右列div上的

overflow:hidden

技巧是为了实现流体宽度效果而导致的问题

这是一把小提琴：
感谢您的帮助

更新
据我所知，CSS无法确定可滚动内容的高度，因此为了使滚动条正常工作并达到正确的高度，需要设置可滚动内容的像素高度

在我的例子中，整个容器的高度是动态的，所以我选择了JS解决方案，它获取整个容器的高度并减去可滚动内容标题的高度，以获得可滚动内容所需的像素值（加上一些微调，即边距）

---

我暂时不回答这个问题，希望我错了，CSS可以胜任这个任务。

您必须设置容器的高度，否则容器将自动调整为内容长度。另外，将溢出属性设置为滚动。修正如下：

        .container {
            height: 200px;
            border: 1px solid black;
            overflow: hidden;
        }
        .left {
            float: left;
        }
        .right {
            overflow: hidden;
        }
        .scrollable-content-header {
            font-size: 25px;
            border-bottom: 1px solid black;
        }
        .scrollable-content {
            font-size: 18px;
            overflow: scroll;
            height:200px;
        }

---

更新的fiddle:

但这会切断可滚动容器底部的内容。此外，将overflow attr设置为scroll将永久保留滚动条，而不管内容是否足够大，可以滚动。我对此不太满意。您可以根据内容长度动态设置它。如果我理解正确，我会更新小提琴，我想这就是你想要完成的。如果这对你有帮助，请告诉我。我已经做了很多类似的样式，所以我相信我可以帮助你找到你想要的解决方案。我真的希望CSS能够“弄清楚”可滚动内容容器有多高。硬编码高度的问题在于，它取决于上方收割台的高度，以及容器高度，而容器高度可能会发生变化（我忘了提到这一点）。如果字体大小发生变化，则需要重新计算高度。更糟糕的是，我提供了增加和减少页面字体大小的控件。我知道这不是不可能的，我可以用一点JS轻松做到。不幸的是，我本以为CSS可以处理这个问题。顺便说一句，我以前尝试过另一种方法来实现相同的布局。我使用了一个有两行的表，左列图像跨越了这两行。第二行包含可滚动的content div，一切都很完美，这正是我想要的。除了一件事。td单元格底部的一些幻影填充，包含可滚动的内容标题。我就是无法解释或摆脱它。