Внутренний div для прокрутки, если внешний div слишком мал?

Question

Я пытаюсь сделать боковую панель, которая на веб-сайте будет иметь "панель", содержащую Контактная информация. Проблема в том, что на маленьких экранах текст переполняет фон.

Вот CSS, где #navigation - это внешний div, а внутренний div называется .innerPanel HTML:

 #navigation{
      position: absolute;
      left: 1.5625em;
      top: 1.5625em;
      bottom: 1.5625em;
      display: block;  
      width: 12.5em;
      background: navy;
      border-right: 1px solid navy; 
      text-align: center;
      background: #B6D2F0;
      padding: 5px;
      color: #4A4A49;
      overflow: hidden;
    }

    #navigation .innerPanel{
        min-height: 200px; /* supply current height here */
        height: auto;
        overflow: auto;
    }

    .titleHead{
     display: block;
     padding-top: 0.9em;
     overflow: auto;
    }


    /* inverted corners for the links */
    #navigation #links {     
      position: relative;
      padding-top: 30px;
    }

    #navigation #links div div div h3{
      border-top: 1px solid navy;
      border-bottom: 1px solid navy;
      color: navy;
      padding: 0px;
      margin: 0px;
      margin-top: 1px;
      line-height: 1.2em;
    }

    #navigation div div div div ul{
      list-style-type: none;
      margin: 0px;
      padding: 0px;
    }

    #navigation div div div div ul li{
      text-align: center;
    }

    #navigation div div div div ul li a{
      display: block;
      text-decoration: none;
      font-weight: bold;
      color: #B6D2F0;
      padding: 0px;
      padding-left: 0;
      line-height: 2.5em;
      background: navy;
      border-bottom: #D8F4F2 1px dashed;  
      }

    #navigation div div div div ul li a:hover{
      display: block;
      text-decoration: none;
      font-weight: bold;
      color: #D8F4F2; 
      background: #0000A2;
    }

    #navigation div div div div ul #last a{
      border-bottom: 0px;
    }

`

Вот фрагмент HTML. Вложенные теги div предназначались для закругленных углов, которые клиент "вставил"

      <div id="navigation"> 
    <div id="logo" class="box"> 
      <div> 
        <div> 
          <div style="text-align: center;"> 
          <img src="./images/pictures/cbk-logo-sm.gif" alt="Logo" /> 
          </div> 
        </div> 
      </div> 
    </div> 
 <div id="links" class="box"> 
      <div> 
        <div> 
          <div>             <ul> 
              <li id="home"> 
                <a href="index.php" title="Home">Home</a> 
              </li><li> 
                <a href="applications.php" title="Apply as a staff member or camper">Applications</a> 
              </li><li id="last"> 
                <a href="about.php" title="About our directors, our grounds and our campers">About</a> 
              </li> 
            </ul><div class="innerPanel"><div class="innerMost"><h4 class="titleHead"> 
            Contact Information</h4> 
                <h5 style="margin: 0.8em 0 0 0; padding: 0;">City Office (September-June)</h5> 
                <p style="font-size: 0.75em; margin: 0; padding: 0;"> 
            <em>Phone:</em> 555-555-5555<br /> 
            <em>Fax:</em> 555-555-5555<br /> 
            <em>Email:</em> email@provider.com<br /> 
            <em>Address:</em> 123 Main Avenue Somewhere, IL 11234
            </p> 
            <h5 style="margin: 0.8em 0 0 0; padding: 0;">Camp (July &amp; August)</h5> 
            <p style="font-size: 0.75em; margin: 0; padding: 0;"> 
            <em>Phone:</em> 987-654-3210<br /> 
            <em>Fax:</em> 123-456-1234<br /> 
            <em>Email:</em> email@provider.com<br /> 
            <em>Address:</em> 456 Centre Road, Nowhere, AL 67891
            </p></div></div>      </div> 
        </div> 
      </div> 
    </div> 
  </div>

Мне нужно кросс-браузерное решение, чтобы innerPanel динамически добавлять к себе полосу прокрутки, чтобы на маленьких экранах контент обрезался, но был доступен с помощью прокрутки ...

Предпочтительно, решение должно быть чисто CSS.

Есть идеи?

РЕДАКТИРОВАТЬ: Я прошу прощения за двусмысленность. У меня есть боковая панель, которая называется #navigation. Содержит логотип, меню и контактную информацию. Я хочу, чтобы контактная информация прокручивалась там, где это необходимо.
Все остальное нормально отображается на экранах 800x600 и выше.

РЕДАКТИРОВАТЬ: как сейчас, innerPanel является фиксированной высоты. Я бы хотел, чтобы он рос, когда это возможно, и, если места достаточно, уберите полосу прокрутки. Обратите внимание, что в CSS не указан HTML-элемент div, который содержится внутри innerPanel.

Answer 1

Мне немного неясно, что вы спрашиваете, но мне кажется, что вы либо хотите overflow:auto для элемента #navigation, или в зависимости от вашего контента и почему он имеет фиксированную высоту:

#navigation .innerPanel {
    max-height: 200px; /* supply current height here */
    height: auto;
    overflow: auto;
}

НЕ РАБОТАЕТ В IE6
IE6 не поддерживает max-height.