调整页面大小时Div正在移动

Question

当我将页面放大到110％时，位于大页面中的div会变得越来越大，此后，它将自动进入新的一行。有什么方法可以防止它移动吗？如果是，请帮助我修复它，请不要讨厌我的代码。

Problem shown here

.movieBox {
  border: 1px solid black;
  height: 250px;
}

.mBoxPart {
  border: 1px solid black;
  display: inline-block;
  height: 250px;
  width: 250px;
}

<div style="padding-left: 30px; padding-right: 30px;">
  <div class="movieBox">
    <div class="mBoxPart" style="float: left;">
    </div>
    <div class="mBoxPart" style="width: 80%; ">
    </div>
  </div>
</div>

Answer 1

最快的解决方案是在容器元素上使用display:flex

请出于正当理由使用内联样式

.movieBox
{
    border: 1px solid black;
    height: 250px;
    display: flex; /* added this */
}

.mBoxPart
{
    border: 1px solid black;
    display: inline-block;
    height: 250px;
    width: 250px;
}

<div style="padding-left: 30px; padding-right: 30px;">
  <div class="movieBox">
    <div class="mBoxPart" style="float: left;">
      test
    </div>
    <div class="mBoxPart" style="width: 80%; ">
      test
    </div>
  </div>
</div>