Horizontal menu does not overflow if preceded by a floating block

I am recreating a layout similar to that of https://ant.design/components/layout/#components-layout-demo-top but placing a logo on the left of the menu apparently breaks the computation of the menu width and, hence, of the overflowed items.

import React from 'react';

import { Layout, Menu } from 'antd';

const { Header } = Layout;

function App(props) {
  return (
    <Layout>
      <Header>
        <div className="logo" />
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={['2']}
          style={{ lineHeight: '64px', fontSize: '125%' }}
        >
          <Menu.Item key="1">menu 1</Menu.Item>
          <Menu.Item key="2">menu 2</Menu.Item>
          <Menu.Item key="3">menu 3</Menu.Item>
        </Menu>
      </Header>
    </Layout>
  );
}

.logo {
  width: 186px;
  height: 48px;
  background-color: red;
  margin: 8px 24px 8px 0;
  float: left;
}

I am using version 7.4.8.

Start with the JSX and CSS reproduction in the issue, focusing on the horizontal Menu when it follows the floated .logo block. Inspect the menu's overflow-width calculation and verify the result with the provided layout: overflowed items should be computed and displayed correctly despite the preceding logo.