플로팅 된 요소의 오버 플로우 된 내용을 숨기는 방법

Question

두 개의 열이 각각 50 % 너비가 있습니다. 각 열에는 신체에 절대적으로 배치 된 오버플로 된 콘텐츠가 있습니다.

<div class='column left'> 
    <div class='inner'><h1>Pink</h1></div> 
</div> 
<div class='column right '> 
    <div class='inner'><h1>Blue</h1></div> 
</div> 

inner divs가 숨겨져 있어야합니다. 어떻게해야합니까? .column에 overflow:hidden을 설정해도 inner div에는 영향을주지 않습니다. Fiddle HERE

추신. 아이디어는 열의 너비를 애니메이션화하고 내부 내용을 표시하는 것입니다. This fiddle 내가 달성하기 위해 노력하고 (하지만 내가 인해 브라우저 요구 사항에 사용할 수없는 vh, vw을 사용)

html, body { 
    width :100%; 
    height: 100%; 
    position: relative; 
} 

.column { 
    float: left; 
    width: 50%; 
    height: 100%; 
    overflow: hidden; /*has no effect*/ 
} 

.inner { 
    position: absolute; 
    top: 50%; 
    width: 100px; 
} 

.left .inner { 
    right: 20px; 
    text-align: right; 
} 

.right .inner { 
    left: 20px; 
    text-align: left; 
} 

Answer 1

는 단순히

visibility: hidden; 

또는

display: none; 

찾고있는 것을 보여

마지막으로 DOM에서 요소를 제거합니다.