Html 不使用jscript，根据div元素的内容调整其大小

我无法获取基于内容动态创建的div，因为它的大小已调整。有一个固定宽度的主div（#divPrincipal）的想法。在这个div中，还有另一个div（#divCabecera），将根据其内容调整大小。最后，在#divCabecera内部，将创建任意数量的带有文本的div（#divTexto）

这里是基本的css：

# divTexto{
  border-right: 1px solid #cdcdcd;
  height: 100%;
  width: 33%;
  float: left;
  display: inline-block;
}

我所需要的就是它们看起来更蓝，红色区域变成黑色区域。然后显示一个卷轴

---

我希望你能帮我

我想这就是你的目的。不确定，但这就是我得到的

---

添加/删除#divtext要查看所需效果

对不起，红色div可以根据需要增长，但只显示黑色div的可见区域，然后当红色div大于黑色div时，它必须显示一个滚动条。您可以在小提琴上设置工作示例吗？

div#container {
    border: 1px solid black;
    height: 250px;
    width: 300px;
    overflow: auto;
    white-space: nowrap;
}

div#container div#divTexto {
    border: 1px solid blue;
    height: 200px;
    display: inline-block;
    margin: 0 20px;
}

div#red {
    border: 1px solid red;
    margin: 10px;
    display: inline-block;
}