Html 如何将网格中的右栏缩小到左栏的最大100%？

我有两列并排在引导网格中。我需要强制第二列不高于第一列。我知道如何使用广泛使用的显示方法：table，强制第二列获得与第一列相关的完整高度。 但如何反过来管理呢？我更喜欢使用css的解决方案，如果可能的话，不要使用js。 第一个包含响应图像，第二个包含文本。 如果文本需要比图像更多的空间，文本应该滚动

<div class="row">       
<div class="col-xs-6 first">
    <img class="img-responsive" src="image/example.jpg" />
</div>
<div class="col-xs-6 second">
    <p>
        Some text lore ipsum etc etc<br />
        Some text lore ipsum etc etc<br />
        Some text lore ipsum etc etc<br />
        Some text lore ipsum etc etc<br />
        Some text lore ipsum etc etc<br />
        Some text lore ipsum etc etc<br />
        Some text lore ipsum etc etc<br />
        Some text lore ipsum etc etc<br />
        Some text lore ipsum etc etc<br />
    </p>
</div>

一些文字知识如ipsum等

一些文字知识如ipsum等

一些文字知识如ipsum等

一些文字知识如ipsum等

一些文字知识如ipsum等

一些文字知识如ipsum等

一些文字知识如ipsum等

一些文字知识如ipsum等

一些文字知识如ipsum等

---

在这里，您可以查看此示例

如果要调整与图像相关的文本div的高度，可以使用

css的
max height
属性

您可以根据需要增减
max height
属性

然后，为滚动设置
overflow-y:auto

希望这对你有帮助


.second{
最大高度：165px；
溢出y：自动；
}


一些文字知识如ipsum等

一些文字知识如ipsum等

一些文字知识如ipsum等

一些文字知识如ipsum等

一些文字知识如ipsum等

一些文字知识如ipsum等

一些文字知识如ipsum等

一些文字知识如ipsum等

一些文字知识如ipsum等


谢谢，Nirav，也许我理解错了，但我不能使用“最大高度”，因为图像会因屏幕大小的不同而增大或缩小。我不能确定响应柱的高度，对吗？即使我选择图像的最大高度（例如640px）作为第二列的最大高度，图像可能更小，第二列仍然可以扩展到640px。