Bootstrap和CSS：如何使文本区域（div）表现得像响应式图像

Question

我有以下HTML

<div class="container">
  <div class="row">
    <div class="col-sm-8">
      <div class="my-text" style="background-color:yellow;padding:10px;">
        <h3>Column 1</h3>
        <p>Line 1 --- Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <p>Line 2 --- enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        <p>Line 3 --- enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      </div>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    </div>
  </div>
</div>

根据上述HTML代码中的内容，我的文本区域（...）的高度（以黄色背景显示）会根据第1列的文本数量而变化。你可以在这里玩一个jsfiddle例子：

http://jsfiddle.net/mddc/2z1t56z8/10/

我希望实现的是，无论第1列中有多少文本，当col-sm-8在桌面（引导项）和文本区域达到最大值时，高度始终相同（我可以指定的值）当浏览器缩小时，它会像响应式图像一样缩小。

我尝试了最小高度/宽度，最大高度/宽度等，但失败了。我无法想到实现目标所需的CSS方法。

谢谢！

Answer 1

如果我理解正确，你可以通过以下方式实现：

.my-text {
  height:200px;
  overflow:scroll;
 }