包含

Question

我使用的是庫在反應四溢元素（反應維度）是圍繞我的div元素與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>