html - 与浏览器调整大小重叠的 DIV

Question

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

每当我将浏览器窗口的大小调整为较低的宽度时，divs 就会相互重叠。

首先，我正在使用position:absolute;

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

.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.

请给我一些解决方案。