响应的子div标度适合父宽度，溢出高度

Question

我试图找到获得响应式滚动Player的最佳方法，可以缩放或缩放以适应容器。我在这里有一个小提琴：

JSFIDDLE

我想要的是div元素显示宽度为400像素，高度为320像素，因此缩放或缩放到原始宽度的80％。 #scale元素需要保留向下滚动并查看所有#wrap的功能。

我需要这个，因为在我的应用程序中#scale div一直在改变大小。谢谢你的帮助！

Answer 1

你必须做溢出自动，就像是浏览器放置滚动条如果有必要我希望这就是你要找的

如果你希望宽度为#wrap的80％，你只需要给他80％的宽度，就像它总是保持80％

#contain{
  width:400px;  
  border: 1px green dotted;
  background-color:#ebebeb;
  padding:10px;
}

#wrap{
  height:250px;
  width:100%;
  border:1px red solid;
  background-color: #fff;
  box-sizing:border-box;
  overflow: auto;
}

#scale{
  height:400px;
  width:100%;
  border: 1px blue dashed;
   
}

<div id="contain">
  <div id="wrap">
    <div id="scale">

    </div>
  </div>
</div>