Принудительно перейти к следующему ряду

Question

У меня есть такая структура:

.divParent{
  height: 100px;
}

.div1 {
  height: 40px;
  background: blue;
}

.div2{
  height: 150px;
  background: yellow
}

<div class="divParent">
  <div class="div1">Div 1</div>
  <div class="div2">Div 2</div>
</div>
<div class="divNew">
  <span>Hello</span>
</div>

Я хочу, чтобы divNew перешел на следующую строку и не перекрывался содержанием divParent. Я пробовал так много вещей, но ничего не получается.

Я знаю, я могу использовать тег <br />, чтобы сделать это, но я не хочу использовать это. Есть ли другое решение?

Answer 1

Вам не нужно удалять высоту, ваш второй div на самом деле вызывает проблему.Это больше, чем родитель.Так что либо увеличьте родительский уровень, либо уменьшите div2.

Answer 2

Использование flex

.divParent{
  clear:both;
  height: 100px;
}

.div1 {
  height: 40px;
  background: blue;
}

.div2{
  height: 150px;
  background: yellow
}
.divParent, .divNew {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.divNew { 
  background:red;
} 

<div class="divParent">
  <div class="div1">Div 1</div>
  <div class="div2">Div 2</div>
</div>
<div class="divNew">
  <span>Hello</span>
</div>