css - 容器放不下大容器

Question

问题是 #lesson 容器不适合 #container。我怎样才能让只有 3 个容器适合一列？ CSS 忍者，我需要你的帮助:)

我的 CSS:#container - 主容器，#first - 绿色容器，#lesson - 灰色 div。

#container {
    position: relative;
    top: 70px;
    left: 80px;
    width:100%;
    height:80%;
}

#first {
    background-color: #A1D490;
    width:45%;
    height:100%;
    float:left;
    border:2px solid black;
    margin: 5px;
}

.lesson {
    position: relative;
    background-color: #DCDDDE;
    margin:10px;
    width:200px;
    height:200px;
    border:1px solid;
    text-align: center;
}

HTML:

<div id="container">
    <div id="first">
      <tpl for=".">
        <div class="lesson"; >
          <p class="txt"><b>Lesson:</b> {lesson} </p>
          <p class="txt"><b>Score:</b> {score}</p>
        </div>
      </tpl>
    </div>
    <div id="second">
    </div>
  </div>

Answer 1

要将容器安装在大容器上，您只需要先从 id 中移除 100% 的高度

#first { /* height: 100% */ }