在调整浏览器窗口大小时，HTML DIV会堆叠在另一个之下

Question

在UI方面没有多少工作。我有一个主要的div和2个嵌套的div。这两个div显示为另一个，但是当我调整窗口大小时，div会一个堆叠在另一个之下。我的要求是，虽然我调整窗口的大小，但div应该放在另一个旁边，如果我想查看内容，浏览器窗口应该有一个水平滚动条向右滚动。

我确实尝试了各种方法，但未能成功。

＆＃13;

＆＃13;

body {
  background-color: white;
}

#mainContainer {
  overflow: hidden
}

#firstBox {
  background-color: gray;
  margin: 10px;
  padding: 10px;
  overflow-x: auto;
  width: 45%;
  height: 30%;
  float: left;
  display: inline-block;
}

#secondBox {
  background-color: gray;
  margin: 10px;
  padding: 10px;
  overflow: auto;
  width: 45%;
  height: 30%;
  float: left;
  display: inline-block;
  position: fixed;
}

＆＃13;

<div id="mainContainer">
  <div id="firstBox" class="gridContainer">
    Lorem ipsum dolor sit amet, nullam eros posuere quam, non ipsum ornare vehicula. In integer, ac tempus aenean lorem nec amet ac, non blandit class, eget odio eu, mollis mauris massa. In augue erat convallis, morbi lectus lobortis tempor in lorem. Dis
    et morbi consectetuer non, tempor pretium. Leo dolor erat orci, lobortis adipisicing scelerisque integer diam lorem, tempus non, dolor libero vivamus velit. Viverra ipsum quam id in arcu, ligula tortor laoreet fermentum sit ipsum. Erat dapibus nulla
    justo vitae, feugiat nullam felis sollicitudin, dolor wisi mauris, tristique tempus nunc tristique. Velit non, duis auctor a. Ipsum pede maecenas vestibulum id ornare, ac facilisi wisi maecenas sem ultrices, non pede cupiditate mollis lorem condimentum,
    suscipit integer etiam mauris amet. Magna rutrum cras, tincidunt lacus ut, lectus donec
  </div>

  <div id="secondBox" class="gridContainer">
    Lorem ipsum dolor sit amet, nullam eros posuere quam, non ipsum ornare vehicula. In integer, ac tempus aenean lorem nec amet ac, non blandit class, eget odio eu, mollis mauris massa. In augue erat convallis, morbi lectus lobortis tempor in lorem. Dis
    et morbi consectetuer non, tempor pretium. Leo dolor erat orci, lobortis adipisicing scelerisque integer diam lorem, tempus non, dolor libero vivamus velit. Viverra ipsum quam id in arcu, ligula tortor laoreet fermentum sit ipsum. Erat dapibus nulla
    justo vitae, feugiat nullam felis sollicitudin, dolor wisi mauris, tristique tempus nunc tristique. Velit non, duis auctor a. Ipsum pede maecenas vestibulum id ornare, ac facilisi wisi maecenas sem ultrices, non pede cupiditate mollis lorem condimentum,
    suscipit integer etiam mauris amet. Magna rutrum cras, tincidunt lacus ut, lectus donec,
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

上面的代码已经正常工作了，我猜不会堆叠在另一个之下，你能告诉我它什么时候堆叠在另一个之下。

Answer 2

尝试将此宽度添加到容器和放大器儿童元素。

＆＃13;

＆＃13;

#mainContainer
{
    width:1490px;
    height:auto; 
    overflow-x: auto;
}   
#firstBox {
    background-color: gray;
    margin: 10px;
    padding: 10px;   
    width: 700px;
    height: auto;  
    float: left;
    
}

#secondBox {
    background-color: gray;
    margin: 10px;
    padding: 10px;
    width: 700px;
    height: auto;
    left:750px;
    float: left;
   
}

＆＃13;

    <div id="mainContainer">
    <div id="firstBox" class="gridContainer">
            Lorem ipsum dolor sit amet, nullam eros posuere quam, non ipsum
            ornare vehicula. In integer, ac tempus aenean lorem nec amet ac, non
            blandit class, eget odio eu, mollis mauris massa. In augue erat
            convallis, morbi lectus lobortis tempor in lorem. Dis et morbi
            consectetuer non, tempor pretium. Leo dolor erat orci, lobortis
            adipisicing scelerisque integer diam lorem, tempus non, dolor libero
            vivamus velit. Viverra ipsum quam id in arcu, ligula tortor laoreet
            fermentum sit ipsum. Erat dapibus nulla justo vitae, feugiat nullam
            felis sollicitudin, dolor wisi mauris, tristique tempus nunc
            tristique. Velit non, duis auctor a. Ipsum pede maecenas vestibulum
            id ornare, ac facilisi wisi maecenas sem ultrices, non pede
            cupiditate mollis lorem condimentum, suscipit integer etiam mauris
            amet. Magna rutrum cras, tincidunt lacus ut, lectus donec
    </div>

    <div id="secondBox" class="gridContainer">
            Lorem ipsum dolor sit amet, nullam eros posuere quam, non ipsum
            ornare vehicula. In integer, ac tempus aenean lorem nec amet ac, non
            blandit class, eget odio eu, mollis mauris massa. In augue erat
            convallis, morbi lectus lobortis tempor in lorem. Dis et morbi
            consectetuer non, tempor pretium. Leo dolor erat orci, lobortis
            adipisicing scelerisque integer diam lorem, tempus non, dolor libero
            vivamus velit. Viverra ipsum quam id in arcu, ligula tortor laoreet
            fermentum sit ipsum. Erat dapibus nulla justo vitae, feugiat nullam
            felis sollicitudin, dolor wisi mauris, tristique tempus nunc
            tristique. Velit non, duis auctor a. Ipsum pede maecenas vestibulum
            id ornare, ac facilisi wisi maecenas sem ultrices, non pede
            cupiditate mollis lorem condimentum, suscipit integer etiam mauris
            amet. Magna rutrum cras, tincidunt lacus ut, lectus donec,
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;