diff --git a/integration/tests/component-relayout-page.test.js b/integration/tests/component-relayout-page.test.js
index 591e853adb..a7401df927 100644
--- a/integration/tests/component-relayout-page.test.js
+++ b/integration/tests/component-relayout-page.test.js
@@ -1,8 +1,17 @@
 import { expect } from '@esm-bundle/chai';
 import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
 import { ContextMenu } from '@vaadin/context-menu';
-
-[{ tagName: ContextMenu.is }].forEach(({ tagName }) => {
+import { MenuBar } from '@vaadin/menu-bar';
+
+[
+  { tagName: ContextMenu.is },
+  {
+    tagName: MenuBar.is,
+    callback: (el) => {
+      el.items = [{ text: 'Item' }];
+    },
+  },
+].forEach(({ tagName, callback }) => {
   describe(`${tagName} re-layout`, () => {
     let wrapper;
 
@@ -16,6 +25,9 @@ import { ContextMenu } from '@vaadin/context-menu';
       }
 
       wrapper.appendChild(document.createElement(tagName));
+      if (callback) {
+        callback(wrapper.firstElementChild);
+      }
 
       for (let i = 0; i < 100; i++) {
         const btn = document.createElement('button');
diff --git a/packages/menu-bar/src/vaadin-menu-bar-mixin.js b/packages/menu-bar/src/vaadin-menu-bar-mixin.js
index 7f6e363a3c..09a74763a1 100644
--- a/packages/menu-bar/src/vaadin-menu-bar-mixin.js
+++ b/packages/menu-bar/src/vaadin-menu-bar-mixin.js
@@ -262,7 +262,12 @@ export const MenuBarMixin = (superClass) =>
       container.addEventListener('click', this.__onButtonClick.bind(this));
       container.addEventListener('mouseover', (e) => this._onMouseOver(e));
 
-      this._container = container;
+      // Delay setting container to avoid rendering buttons immediately,
+      // which would also trigger detecting overflow and force re-layout
+      // See https://github.com/vaadin/web-components/issues/7271
+      queueMicrotask(() => {
+        this._container = container;
+      });
     }
 
     /**
@@ -468,6 +473,10 @@ export const MenuBarMixin = (superClass) =>
 
     /** @private */
     __detectOverflow() {
+      if (!this._container) {
+        return;
+      }
+
       const overflow = this._overflow;
       const buttons = this._buttons.filter((btn) => btn !== overflow);
       const oldOverflowCount = this.__getOverflowCount(overflow);
diff --git a/packages/menu-bar/test/visual/lumo/menu-bar.test.js b/packages/menu-bar/test/visual/lumo/menu-bar.test.js
index 3897cd0e3b..c3a386183f 100644
--- a/packages/menu-bar/test/visual/lumo/menu-bar.test.js
+++ b/packages/menu-bar/test/visual/lumo/menu-bar.test.js
@@ -19,11 +19,13 @@ describe('menu-bar', () => {
       });
 
       describe('basic', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           div = document.createElement('div');
           div.style.padding = '10px';
 
           element = fixtureSync('<vaadin-menu-bar></vaadin-menu-bar>', div);
+          await nextRender();
+
           element.items = [
             { text: 'Home' },
             {
@@ -57,11 +59,13 @@ describe('menu-bar', () => {
       });
 
       describe('single button', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           div = document.createElement('div');
           div.style.padding = '10px';
 
           element = fixtureSync('<vaadin-menu-bar></vaadin-menu-bar>', div);
+          await nextRender();
+
           element.items = [{ text: 'Actions' }];
         });
 
@@ -87,11 +91,13 @@ describe('menu-bar', () => {
           return item;
         }
 
-        beforeEach(() => {
+        beforeEach(async () => {
           div = document.createElement('div');
           div.style.padding = '10px';
 
           element = fixtureSync('<vaadin-menu-bar></vaadin-menu-bar>', div);
+          await nextRender();
+
           element.items = [
             { component: 'u', text: 'Home' },
             {
diff --git a/packages/menu-bar/test/visual/material/menu-bar.test.js b/packages/menu-bar/test/visual/material/menu-bar.test.js
index 7164637cae..28d5ebc522 100644
--- a/packages/menu-bar/test/visual/material/menu-bar.test.js
+++ b/packages/menu-bar/test/visual/material/menu-bar.test.js
@@ -19,11 +19,13 @@ describe('menu-bar', () => {
       });
 
       describe('basic', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           div = document.createElement('div');
           div.style.padding = '10px';
 
           element = fixtureSync('<vaadin-menu-bar></vaadin-menu-bar>', div);
+          await nextRender();
+
           element.items = [
             { text: 'Home' },
             {
@@ -58,11 +60,13 @@ describe('menu-bar', () => {
       });
 
       describe('single button', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           div = document.createElement('div');
           div.style.padding = '10px';
 
           element = fixtureSync('<vaadin-menu-bar></vaadin-menu-bar>', div);
+          await nextRender();
+
           element.items = [{ text: 'Actions' }];
           element.setAttribute('theme', 'outlined');
         });
@@ -89,11 +93,13 @@ describe('menu-bar', () => {
           return item;
         }
 
-        beforeEach(() => {
+        beforeEach(async () => {
           div = document.createElement('div');
           div.style.padding = '10px';
 
           element = fixtureSync('<vaadin-menu-bar></vaadin-menu-bar>', div);
+          await nextRender();
+
           element.items = [
             { component: 'u', text: 'Home' },
             {