html - 親 div のサイズが小さい場合は、div スクロールバーを指定します

Question

固定サイズの子 div があります。液体の親 div の幅が子よりも小さい場合、子を親内に保持し、子スクロールバーを表示したいと考えています。 jsfiddel

HTML

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

CSS

.child{

   width: 500px;
   height: 400px;

   background-color: green;

}

.parent{

   height: 100%;
   width: 100%;
   background-color: red;
   padding: 50px;
   width: auto;
}

Answer 1

overflow: auto;親コンテナーに追加します。

.parent{
   height: 100%;
   width: 100%;
   background-color: red;
   padding: 50px;
   width: auto;
   overflow: auto;
}

デモ