问CSS/HTML:子DIV溢出父

EN

<div class="nav-tabs-wrapper">
  <div class="nav-tabs">
    <div class="nav-tab">
      <input type="radio" id="tab1" name="nav-group" checked>
      <label for="tab1">foooooooo</label>
      <div class="nav-content">
        <div> stuff1 </div>
      </div>
    </div>
    <div class="nav-tab">
      <input type="radio" id="tab2" name="nav-group">
      <label for="tab2">bar</label>
      <div class="nav-content">
        <div> stuff2 </div>
      </div>
    </div>
  </div>
</div>

.nav-tabs-wrapper
{
    padding: 10px; /* separates the code from other content */
    border: 1px solid #F00; /* visibility aid */
}
.nav-tabs
{
    position: relative; /* needed as future positioning reference base */
            clear: both;
            height: 200px; /* Unfortunate */
    padding-left: 10px; /* provides the paragraph-tab effect to the tabs */
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
}
.nav-tab
{
    float: left; /* keeps the tabs inline with no gap [inline-block introduces gaps] */
}
.nav-tab label
{
    display: block; /* needed so tabs can be positioned correctly to hide nav-content border */
    position: relative; /* needed to position tabs correctly */
    top: 1px; /* lowers the tabs to cover the border of nav-content; needed so bottom corners aren't slanted, but a 90deg angle */
    padding: 4px;
    border: 1px solid #999;
    border-bottom-width: 0px; /* removes bottom border; needed so bottom corners aren't slanted, but a 90deg angle */
    background-color: #CCC;
}
.nav-tab [type=radio]
{
    display: none; /* hide the radio selectors */
}
.nav-tab [type=radio]:checked ~ label
{
    z-index: 2; /* makes sure that the active tab is drawn above nav-content to cover border */
    background-color: #FFF; /* covers the nav-content border */
}
.nav-tab [type=radio]:checked ~ .nav-content
{
    visibility: visible !important; /* unhides the nav-content div for the current tab */
}
.nav-tab:nth-child(n+2)
{
    margin-left: -1px; /* positions the left border of every second+ tab over the previous tab's right border */
}
.nav-content
{
    visibility: hidden; /* hides the content by default */
    position: absolute; /* positions the content for all tabs to the absolute left relative to the tabs */
    left: 0; /* undo's the padding from the paragraph-tab effect */
    width: 100%; /* fills the nav-content DIV completely for a better looking border */
    z-index: 1; /* makes sure that the border is drawn under the tabs */
    border: 1px solid #999;
}
.nav-content div
{
    padding: 10px; /* separate div needed to keep nav-content from overflowing due to padding */
}