html - 子 Div オーバーフロー x - y と親のスクロール

Question

HTML:

<div id="parent">
   <div id="child">

      <ul>
         <li>one</li>
         <li>A very long name. A very long name. A very long name. A very long name. A very long name. A very long name. </li>
         <li>Three</li>
      </ul>

   </div>    
</div>

CSS:

#parent {width:170px; border:1px solid #000; padding:20px}
#child {border:1px solid #F00}

子 div に width プロパティを適用していません。私が欲しいのは、親 div に水平および垂直スクロールバーを表示することです。

フィドル: http://jsfiddle.net/NanzR/

期待される出力:

Answer 1

次に例を示します。

jsfiddle デモ

#parent {
    width:170px;
    overflow: scroll;
    height: 170px;
}
#child {
    overflow: hidden;
    display: inline-block;
    min-width: 100%;
}