Один дочерний элемент 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

Я добавил переполнение для основного <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>

Answer 2

это отличный вопрос, хотя он нарушает некоторые правила, задаваемые вопросом:

{ ссылка }

Дело в том, что переполнение относительно его дочерним элементам, так что это либо одно, либо другое, если вы хотите иметь только одно родительское деление.

Таким образом, этот эффект недостижим только с одной оболочкой разделение. Однако, когда вы добавляете третий, это довольно просто. взгляните на пример

.bigDiv {
  background: red;
  height: 50vh;
  width: 50vw;
  border: 5px solid black;
}
.bigDiv div div {
  margin-top: 5vh;
  width: 75vw;
  border: 3px dashed black;
}

.divOne {
  overflow: hidden;
}

.chop {
  background: orange;
}
.overflow {
  background: lightgray;
}

<div class="bigDiv">

  <div class="divOne">
    <div class="chop">
      <p>this must get chopped</p>
    </div>
  </div>
  <div class="divTwo">
    <div class="overflow">
      <p>this must overflow</p>
    </div>
  </div>
</div>

и результат

Answer 3

Используйте псевдоэлемент с большим box-sahdow и можете управлять z-индексом, тогда вы можете легко скрыть / показать желаемое переполнение:

.rootdiv {
  width: 300px;
  height: 300px;
  padding:3px;
  background: red;
  position:relative;
  z-index:0;
}
.rootdiv:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border: solid;
  box-shadow: 0 0 0 calc(100vw + 100vh) #fff;
  z-index:0;
}

.rootdiv > div {
  position: relative;
  left: 20px;
  margin:20px 0 0 20px;
  border: dashed;
}

.rootdiv .not-overflow {
  background: orange;
  z-index:-1; /* will not overflow */
}

.rootdiv .must-overflow {
  background: gray;
  z-index:1; /* will overflow */
}

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

Answer 4

Добавьте white-space:nowrap в обоих div и overflow:hidden в тот, который вы хотите нарезать.

См. Jsfiddle здесь: https://jsfiddle.net/23cry94b/