在加载较小/较大的新内容后，如何确保我的Jumbotron不会调整大小？

Question

我目前正致力于在FreeCodeCamp上获得前端开发证书，我正在努力改进我的一些旧项目。我创建了一个随机引用生成器，它从API中提取引用。

当填充报价时，报价的长度可能会有所不同，因此包含报价/作者的Jumbotron会不时调整大小以解决这个问题。我不喜欢这个，因为它确实发生时看起来很尖锐。最终，我的目标是确保无论填充什么报价，盒子都保持相同的大小，即使在加载之前也是如此。

是否可以为它设置一个比任何引号略大的最小尺寸（最大引号长度为136个字符）？

HTML：

<div class='container'>
  <div id='jumbo' class='jumbotron' style='min-height: px'>
    <h1>Quote Machine</h1>
    <hr></hr>
    <p id="quote"></p>
    <p id="author"></p>
<button id='icon' class="btn btn-custom btn-block">I'll Have Another!</body>
</div>

CSS（适用于这种情况）：

.jumbotron {
  background-color: #1abc9c;
}

.container {
  padding: 30px;
}

Link for reference

谢谢！