调整浏览器窗口大小时，HTML DIV 会一层层堆叠

Question

在 UI 方面没有做太多工作。我有一个主 div 和 2 个嵌套的 div。 2 个 div 一个接一个地出现，但是当我调整窗口大小时，div 的堆栈一个放在另一个下面。我的要求是，虽然我调整了窗口的大小，但如果我想查看内容，div 应该一个挨着一个放置，并且浏览器窗口应该有一个水平滚动条以便向右滚动。

我确实尝试了各种方法，但都没有成功。

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;
}

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

Answer 1

上面的代码已经可以正常工作了，我猜它并没有把一个堆叠在另一个下面，你能告诉我它什么时候一个堆叠在另一个下面吗。