Horizontal menu does not overflow if preceded by a floating block

[yp]

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.

[picodoth]

Menu only overflows when there is not enough space. Trying give a width: cacl(100% - 120px) on menu element. I'll try to make a pr to fix the demo in ant-design repo.

[yp]

I see. That solves the problem. Is it the recommended solution?