自动高度不覆盖整个容器

Question

我在获取容器的高度以完全覆盖容器内的文本时遇到问题。我不确定我做错了什么。我已将高度设置为自动，试图解决这个问题，但高度仍然没有覆盖所有内容。

有人看到我做错了什么吗？如果有人需要看直播，我可以在评论中给出网址。

.light-gray {
  background-color: #E0E0E0;
  width: 34%;
}
.light-gray-container {
  /*margin: 100px 15% 0 15%;*/
  top: 150px;
  left: 15%;
  position: relative;
  width: 80%;
  height: auto;
}
#things-to-know-title {
  font-size: 1.4em;
  color: #000;
}
.things-to-know-bullets {
  font-size: 1.1em;
  color: #606060;
  margin: 40px 15% 40px 0;
  line-height: 1.6em;
}

<div class="light-gray">
  <div class="light-gray-container">
    <div id="things-to-know-title">THINGS TO KNOW</div>
    <div class="things-to-know-bullets">Although we are located in Ohio, we review and accept business projects from all over the world.</div>
    <div class="things-to-know-bullets">Take a few extra minutes to provide us with your specific project details as this will allow us to better evaluate the scope.</div>
    <div class="things-to-know-bullets">If you have a general inquiry you may email us directly.</div>
    <div class="things-to-know-bullets">We do a thorough evaluation of all projects and enjoy working with established brands that are open to a balance of strategic & creative solutions.</div>
    <div class="things-to-know-bullets">If you have an exceptional command of the English language and would like to write for our digital agency please email us.</div>
    <div class="things-to-know-bullets">If you have strong strategic, design or user experience skills and would like to Intern or work for Isadora Design please email us.</div>

  </div>
</div>

更新图片：

Answer 1

将 overflow:auto 添加到 div 和 class light-gray 将解决您的问题。

Answer 2

你可以像这样改变你的css

删除.light-gray-container中的top: 150px;并在.light-gray中添加一个padding-top: 150px;

.light-gray {
  background-color: #E0E0E0;
  width: 34%;
  padding-top: 150px;
}
.light-gray-container {
  /*margin: 100px 15% 0 15%;*/
  left: 15%;
  position: relative;
  width: 80%;
  height: auto;
}
#things-to-know-title {
  font-size: 1.4em;
  color: #000;
}
.things-to-know-bullets {
  font-size: 1.1em;
  color: #606060;
  margin: 40px 15% 0px 0;
  line-height: 1.6em;
}

<div class="light-gray">
  <div class="light-gray-container">
    <div id="things-to-know-title">THINGS TO KNOW</div>
    <div class="things-to-know-bullets">Although we are located in Ohio, we review and accept business projects from all over the world.</div>
    <div class="things-to-know-bullets">Take a few extra minutes to provide us with your specific project details as this will allow us to better evaluate the scope.</div>
    <div class="things-to-know-bullets">If you have a general inquiry you may email us directly.</div>
    <div class="things-to-know-bullets">We do a thorough evaluation of all projects and enjoy working with established brands that are open to a balance of strategic & creative solutions.</div>
    <div class="things-to-know-bullets">If you have an exceptional command of the English language and would like to write for our digital agency please email us.</div>
    <div class="things-to-know-bullets">If you have strong strategic, design or user experience skills and would like to Intern or work for Isadora Design please email us.</div>

  </div>
</div>

自动高度不覆盖整个容器

Auto height not covering the entire container

html

css

position