html - 如果父 div 尺寸较小，则提供 div 滚动条

Question

我有固定大小的子 div，当液体父 div 的宽度小于子级时，我想将子级保持在父级内并给子级滚动条。 杰菲德尔

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;
}

演示