一个子 div 必须溢出，另一个不能溢出

Question

这里红色框是没有设置任何溢出属性的父div。橙色和灰色的盒子是它的孩子。我想知道的是，一个孩子是否有可能溢出另一个孩子不溢出？

.rootdiv {

  width: 300px;

  height: 300px;

  background: red;

  border: solid;

  position: relative;

  overflow: hidden;

}

.rootdiv .not-overflow {

  border: dashed;

  background: orange;

  position: relative;

  left: 20px;

}

.rootdiv .must-overflow {

  border: dashed;

  background: gray;

  position: relative;

  top: 20px;

  left: 20px;

}

<div class="rootdiv">

    <div class="not-overflow">

      This must get chopped.

    </div>

    <div class="must-overflow">

      This must overflow.

    </div>

</div>

Answer 1

我为 main 添加了溢出<div>，并用于应该溢出的position:absolute内容.must-overflow：.rootdiv {&nbsp; width: 300px;&nbsp; height: 300px;&nbsp; background: red;&nbsp; border: solid;&nbsp; overflow: hidden;&nbsp;}.rootdiv .not-overflow {&nbsp; border: dashed;&nbsp; background: orange;&nbsp; position: relative;&nbsp; left: 20px;}.rootdiv .must-overflow {&nbsp; border: dashed;&nbsp; background: gray;&nbsp; position: absolute ;&nbsp; top: 50px;&nbsp; left: 30px;&nbsp; width: 400px;}<div class="rootdiv">&nbsp; &nbsp; <div class="not-overflow">&nbsp; &nbsp; &nbsp; This must get chopped.&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="must-overflow">&nbsp; &nbsp; &nbsp; This must overflow.&nbsp; &nbsp; </div></div>

Answer 2

问题是溢出是相对于它的子级的，所以如果你只想有一个父级分区，那么它要么是其中之一，要么是另一个。所以仅用一个包装器分区是无法实现这种效果的。然而，当你添加第三个时，它就非常简单了。看一下例子.bigDiv {&nbsp; background: red;&nbsp; height: 50vh;&nbsp; width: 50vw;&nbsp; border: 5px solid black;}.bigDiv div div {&nbsp; margin-top: 5vh;&nbsp; width: 75vw;&nbsp; border: 3px dashed black;}.divOne {&nbsp; overflow: hidden;}.chop {&nbsp; background: orange;}.overflow {&nbsp; background: lightgray;}<div class="bigDiv">&nbsp; <div class="divOne">&nbsp; &nbsp; <div class="chop">&nbsp; &nbsp; &nbsp; <p>this must get chopped</p>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="divTwo">&nbsp; &nbsp; <div class="overflow">&nbsp; &nbsp; &nbsp; <p>this must overflow</p>&nbsp; &nbsp; </div>&nbsp; </div></div>和结果

Answer 3

使用带有大 box-sahdow 的伪元素，并且可以控制 z-index，然后您可以轻松隐藏/取消隐藏您想要的溢出：.rootdiv {&nbsp; width: 300px;&nbsp; height: 300px;&nbsp; padding:3px;&nbsp; background: red;&nbsp; position:relative;&nbsp; z-index:0;}.rootdiv:after {&nbsp; content:"";&nbsp; position:absolute;&nbsp; top:0;&nbsp; left:0;&nbsp; right:0;&nbsp; bottom:0;&nbsp; border: solid;&nbsp; box-shadow: 0 0 0 calc(100vw + 100vh) #fff;&nbsp; z-index:0;}.rootdiv > div {&nbsp; position: relative;&nbsp; left: 20px;&nbsp; margin:20px 0 0 20px;&nbsp; border: dashed;}.rootdiv .not-overflow {&nbsp; background: orange;&nbsp; z-index:-1; /* will not overflow */}.rootdiv .must-overflow {&nbsp; background: gray;&nbsp; z-index:1; /* will overflow */}<div class="rootdiv">&nbsp; &nbsp; <div class="not-overflow">&nbsp; &nbsp; &nbsp; This must get chopped.&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="must-overflow">&nbsp; &nbsp; &nbsp; This must overflow.&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="not-overflow">&nbsp; &nbsp; &nbsp; This must get chopped.&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="must-overflow">&nbsp; &nbsp; &nbsp; This must overflow.&nbsp; &nbsp; </div></div>

Answer 4

width: 100%您可以使用和overflow: hidden要隐藏的位置创建父 div 。例如：.rootdiv {&nbsp; &nbsp; width: 300px;&nbsp; &nbsp; height: 300px;&nbsp; &nbsp; background: red;&nbsp; &nbsp; border: solid;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; /* overflow: hidden;*/&nbsp; }&nbsp; .rootdiv .not-overflow {&nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; width: 100%;&nbsp; }/* NOTE: just transformed the original "not-overflow" from the question to "styles" */&nbsp;&nbsp; .styles {&nbsp; &nbsp; border: dashed;&nbsp; &nbsp; background: orange;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; left: 20px;&nbsp; }/* end of changes */&nbsp; .rootdiv .must-overflow {&nbsp; &nbsp; border: dashed;&nbsp; &nbsp; background: gray;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; top: 20px;&nbsp; &nbsp; left: 20px;&nbsp; }<div class="rootdiv">&nbsp; <div class="not-overflow">&nbsp; &nbsp; <div class="styles">This must get chopped.</div>&nbsp; </div>&nbsp; <div class="must-overflow">This must overflow.</div></div>