html - 包含溢出元素

Question

我在 react (react-dimensions) 中使用了一个库，它用 height:0; 将我的元素包装在一个 div 中。宽度:0；溢出:可见

这打破了我的风格。

我想知道是否有一种方法可以让父级包含溢出的子级。

我准备了一个demo:

.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

我承认我是通过尝试找到它的，但是当您将父级设为 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>