Javascript 是否有一种纯CSS解决方案可以将浮动元素的兄弟元素调整为其父元素中的完整剩余高度（无绝对位置）？

我有一个div，其中包含一些文本，它们是“float:right”元素的兄弟。随着父div水平调整大小，浮动元素可能在包含文本的div之上，也可能不在其之上。是否有一个纯CSS解决方案（即没有JavaScript）让包含文本的div展开以占据其父级中的剩余高度

因此，如果浮动元素不在包含文本的div之上，它应该占据父元素的整个高度。否则，它应该占据它下面的所有高度，但不应该溢出到父级之外

我承认英文描述可能很难可视化，所以我用HTML编写了一些代码来说明。在这个示例中，顶部的小部件堆栈表示我正在寻找的行为，但它是通过JavaScript实现的。底层堆栈是默认的行为，只有我能想到的CSS

• 在浏览器中打开HTML（在Chrome中测试）并水平调整浏览器窗口的大小，以查看顶部和底部堆栈的行为差异。请注意，此示例已经简化，因此请不要提供依赖于父div处于或几乎处于顶层的解决方案
• 请注意，在底部堆栈中，当浮动元素通过调整窗口的大小强制位于父div的rect上时，蓝色div被向下推，并溢出父div的rect。我想实现顶部堆栈的行为，当浮动元素移到蓝色div上时，蓝色div的大小会变短，但是使用纯CSS

这可能吗？应该应用什么CSS？请不要使用JQuery，也不要使用绝对定位

/*将内部DIV设置为最大高度，而不会使外部DIV溢出*/
函数hackit（）{
var elm=document.getElementById（“goodtext”）；
elm.style.height=“计算（100%-”+elm.offsetTop+“px）”
};
window.addEventListener（“加载”，hackit）；
addEventListener（“调整大小”，hackit）

控制
12345678910 111213
14151617181920
控制
12345678910 111213
14151617181920
请编辑您的问题并加以澄清。您的代码中没有任何“文本框”。也许是指那些块的颜色。现在听起来可能有点别扭，但我已经改写了。