包含溢出的元素

Question

我正在使用一个库（react-dimensions）中的库，它将我的元素包装在一个带有height:0; width: 0; overflow: visible的div中

这打破了我的风格。

我想知道父母是否有办法容纳满溢的孩子。

我准备了一个演示：

＆＃13;

＆＃13;

.parent {
  /* ??? */
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

我承认我通过尝试找到了这个，但是当你让父母成为inline-block时它会有用 - 请参阅代码段和代码集。至少它会将后续内容向下移动而不会重叠。

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>

Answer 2

您可以在父级上使用overflow:hidden来隐藏溢出的子级。但看起来您使用react-dimensions的方式可能会出现另一个问题......我不确定该库是如何工作的。