DIV与浏览器重叠调整大小

Question

我正在将一个html页面转换为一个没有任何框架的@media查询的响应式页面。

每当我将浏览器窗口调整到较低宽度时，div都会相互重叠。

首先，我使用position:absolute;

但现在我已删除position:absolute;，但div仍然相互重叠。

.demoD
{
width:100%;
position:relative;
display:flex;
margin-top:50%; 

}

#demoD1 {
width:50%;
padding:40px 10px 20px 40px;
 }

 #demoD2{
width:50%;
background-color:#F3F6F7;
padding:80px 10px 30px 40px;    
  }

divD2与divD1重叠。 divD1和divD2都放在divD。

中

请给我一些解决方案。