Html 浮动按钮位于其下方'；更改视口大小后的父对象（仅限Chrome）

我遇到了一个问题，它显然只影响Google Chrome（甚至不影响Safari）：

我有多个

字段和一个按钮。在移动设备上，选择字段的宽度应为100%，按钮应在其下方水平居中

在大屏幕分辨率（本例中为>1024px）下，选择字段将通过

display:inline block彼此相邻放置和按钮应向右浮动

如果你第一次在大屏幕上加载，一切看起来都像预期的那样。但如果现在将浏览器窗口缩小到1024px以下，然后再将其加宽，则按钮将位于其父窗口的外部

奇怪的是：如果删除
float:right，按钮再次正确定位。
我猜这与按钮的
display:block有关。这个属性似乎没有被
display:inline块所取代正确。这可能是一个Chrome bug吗？
你好，一个解决方案是浮动所有元素

@media only screen and (min-width: 1024px) {
  select {
    width: auto;    
    float:left;
  }
  button {
    float: right;
  }
  .box{
    overflow:hidden;
  }
}

在这种情况下，这将符合需要，但在我的实际项目中，我需要将元素与
显示：内联块
和
垂直对齐：中间对齐，因为它不仅是选择字段，而且还有文本、跨距和标签-所有这些都处于不同的高度，并且它们应该彼此垂直居中。我只是想知道为什么这只发生在Chrome中……首先你应该知道显示：inline是一种可怕的“allign”元素的方式，它们之间甚至有一个“”字符，而且最重要的是（正如你所看到的）它不是一个稳定的构造，你可以向我们展示完整的项目，让我们了解更多。一种解决方案实际上是将submit按钮定位为绝对按钮，而将.box定位为相对按钮