html - 一个子 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>

标签： htmlcssuser-interfacesass

Answer 1

我为 main 添加了溢出，<div>并用于position:absolute应该.must-overflow溢出：

.rootdiv {
  width: 300px;
  height: 300px;
  background: red;
  border: solid;
  overflow: hidden; 
}

.rootdiv .not-overflow {
  border: dashed;
  background: orange;
  position: relative;
  left: 20px;
}

.rootdiv .must-overflow {
  border: dashed;
  background: gray;
  position: absolute ;
  top: 50px;
  left: 30px;
  width: 400px;
}

<div class="rootdiv">
    <div class="not-overflow">
      This must get chopped.
    </div>
    <div class="must-overflow">
      This must overflow.
    </div>
</div>