DIV溢出其容器

Question

我有4个div，outer，inner，title和content。我想将inner div放在外部，title和content - 位于inner div内，一个放在另一个上面。我将外部和内部div相对，另外2个 - 绝对。

inner div恰好位于outer内，但title和content溢出inner div。

如何在这里修复我的CSS？

#outer {
  width: 90%;
  margin: 20px auto;
  border: 2px solid red;
  height: 500px;
  position: relative;
}

#inner {
  width: 100%;
  border: 1px solid green;
  height: 300px;
  position: relative;
}

#inner .title {
  width: 100%;
  height: 63px;
  padding-left: 1%;
  padding-top: 5px;
  border-radius: 2px;
  float: left;
  border: 1px solid blue;
  background-color: lightblue;
  position: absolute;
  top: 0;
}

#inner .content {
  padding: 2em 2em;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: #FFF;
  height: auto;
  display: block;
  float: left;
  border: 2px solid orange;
  position: absolute;
  top: 20%;
}

<div id="outer">
  <div id="inner">
    <div class="title"></div>
    <div class="content"></div>
  </div>
</div>

Answer 1

要防止title和content互相溢出，只需为其分配relative位置，并将absolute位置分配给其父级。就像那样

#outer {
  width: 90%;
  margin: 20px auto;
  border: 2px solid red;
  height: 500px;
  position: relative;
}

#inner {
  width: 90%;
  border: 1px solid green;
  height: 300px;
  position: absolute;
}

#inner .title {
  width: 100%;
  height: 63px;
  padding-left: 1%;
  padding-top: 5px;
  border-radius: 2px;
  float: left;
  border: 1px solid blue;
  background-color: lightblue;
  position: relative;
  top: 0;
}

#inner .content {
  padding: 2em 2em;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: #FFF;
  height: auto;
  display: block;
  float: left;
  border: 2px solid orange;
  position: relative;
  top: 20%;
}

<div id="outer">
  <div id="inner">
    <div class="title"></div>
    <div class="content"></div>
  </div>
</div>

Answer 2

＆＃13;

＆＃13;

#outer {
  width: 90%;
  margin: 20px auto;
  border: 2px solid red;
  height: 500px;
  position: relative;
}

#inner {
  max-width: 100%;
  border: 1px solid green;
  height: 300px;
  position: relative;
padding: 0 5px;
}

#inner .title {
  width: 100%;
  height: 63px;
  padding-top: 5px;
  border-radius: 2px;
  border: 1px solid blue;
  background-color: lightblue;
}

#inner .content {
  width: 100%;
  height: 63px;
  background: #FFF;
  display: block;
  border: 1px solid orange;
}

＆＃13;

<div id="outer">
  <div id="inner">
    <div class="title"></div>
    <div class="content"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;