반응에 내가 라이브러리를 사용하고

Question

넘치는 요소를 포함 (반응 - 치수)이 내 스타일을 나누기 height:0; width: 0; overflow: visible

와 사업부 내 요소를 래핑.

부모가 넘치는 자식을 포함 할 수있는 방법이 있는지 궁금합니다.

가 나는 데모를 준비했습니다 :

이

.parent { 
 
    /* ??? */ 
 
} 
 

 
.child { 
 
    width: 0; 
 
    height: 0; 
 
    overflow: visible; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    <p> 
 
     This box overflows! 
 
    </p> 
 
    </div> 
 
</div> 
 
<p> 
 
    Other content... 
 
</p>

https://codepen.io/anon/pen/egEBev

Answer 1

그럼 당신은 오버 플로우 아이들을 숨기기 위해 부모에 overflow:hidden를 사용할 수 있습니다. 그러나 당신이 어떻게 사용하고 있는지 또 다른 문제가있는 것처럼 보입니다. react-dimensions ... 그 라이브러리가 어떻게 작동하는지 명확하지 않습니다.

Answer 2

나는 이것을 시도해 보았다는 것을 인정하지만, 부모가 inline-block이 될 때 일종의 작품 - 스 니펫과 codepen을 참조하십시오. 적어도 겹치지 않고 후속 콘텐츠를 이동합니다.

https://codepen.io/anon/pen/LxjxRv

.parent { 
 
    display: inline-block; 
 
} 
 

 
.child { 
 
    width: 0; 
 
    height: 0; 
 
    overflow: visible; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    <p> 
 
     This box overflows! 
 
    </p> 
 
    </div> 
 
</div> 
 
<p> 
 
    Other content... 
 
</p>