Html 停止外部div 100%屏幕宽度

我被一些简单div的css编码卡住了。我有一个外底和两个内底。我浮动2个内分区，因此当屏幕宽度低于1200px时，2个内分区相互重叠。这一切都很好，我想要什么。我遇到的问题是，当屏幕低于1200px且两个内部div相互重叠时，外部div仍然位于屏幕侧边的100%。我不希望这样，但希望外部div收缩到始终是内部div的宽度。我尝试过很多事情，但都没有成功。谢谢-这是我的代码

<style type="text/css">
   #Panel {
      float: left;
      background: #3CA6F0;
      padding: 10px;
   }
</style>


<div id="Panel">
   <div style="width: 600px; display:inline-block; background-color: #eee;">1</div>
   <div style="width: 600px; display:inline-block; background-color: #eee;">2</div>
</div> 

#面板{
浮动：左；
背景#3CA6F0；
填充：10px；
}
1.
2.

到目前为止，我理解了你的问题，我给了

面板内的
div
s

css属性的

float:left

和

宽度的
50%

   #Panel {
       background: #3CA6F0;
   }
   #Panel > div {
       width: 50%;
       background: #ddd;
       float: left;
   }

这使它们彼此相邻浮动



编辑

下面是一段代码：

@media only screen and (max-width: 768px) {
    #Panel > div {
        width: 100%;
}

2
div
s将相互堆叠

您可以制作一个代码笔或JSFIDLE来表示您的问题吗？你只能在最小化屏幕时看到我的问题谢谢，但是我想保留我原来的内部div的css，我希望内部div像现在一样-在大屏幕上并排，但在小屏幕上彼此重叠。我的问题是，当内部2在较小的屏幕上相互重叠时，外部div保持在屏幕宽度，并且希望外部div仅为内部div的宽度。哦，好的，我回家后会这样做：）