溢出：当position：absolute时隐藏不起作用(Overflow: hidden not working when position: absolute)

 我正在尝试构建一个UI组件，其构思是具有2个重叠的部分（第一个必须覆盖第二个）并使用可拖动元素扩展第一个。 我正在为您提供演示： 
 
 http://codepen.io/LazarGeorgiev/pen/yOPbmx 
 
 问题是，当我调整第一个元素的大小时，我希望元素不重新定位，为了实现这个，我使用position:absolute; 这显然是我的overflow:hidden; 
 
 我检查了StackOverflow上的一些帖子，我应该使用position:relative; 在一个外部的<div>元素，这在这里不起作用，因为它刹车position:absolute; 
 
 所以我的问题是如何在调整大小时将其隐藏而不重新定位内部元素。 
 
 PS最里面的<div>是.the-content而外部是.first 

I am trying to build a UI component which's idea is to have 2 overlapping sections (the first one has to cover the second) and to expand the first one with a draggable element. I am providing you with a demo:
 
http://codepen.io/LazarGeorgiev/pen/yOPbmx
 
The problem is that I want the elements not to reposition when I resizing the first element and in order to achieve this I use position:absolute; which apparently brakes my overflow:hidden;
 
I checked some posts on StackOverflow where I should use position:relative; on an outer <div> element, which doesn't work here, because it brakes the position:absolute;
 
So my question is how to make it hide when resizing without repositioning the elements inside.
 
P.S. the innermost <div> is .the-content and the outer is .first

原文：https://stackoverflow.com/questions/36421332