diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css
index f55fccb153abd7f9af4540cbc3999c84324541fb..67d94725b35282f9a5eaf8f8100758c567389840 100644
--- a/src/components/menu-bar/menu-bar.css
+++ b/src/components/menu-bar/menu-bar.css
@@ -37,6 +37,7 @@
     justify-content: flex-start;
     flex-wrap: nowrap;
     align-items: center;
+    flex-grow: 1;
 }
 
 .scratch-logo {
@@ -84,6 +85,11 @@
     background-color: $ui-black-transparent;
 }
 
+.growableMenuBarItem {
+    max-width: 12rem;
+    flex: 1;
+}
+
 .file-group {
     display: flex;
     flex-direction: row;
diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
index 82b37b0b058c18380f74a5b017daada9e61a74b1..5c1af68d670c5d3c8a1908d7ca28ea8088b2650b 100644
--- a/src/components/menu-bar/menu-bar.jsx
+++ b/src/components/menu-bar/menu-bar.jsx
@@ -393,7 +393,7 @@ class MenuBar extends React.Component {
                         <FormattedMessage {...ariaMessages.tutorials} />
                     </div>
                     <Divider className={classNames(styles.divider)} />
-                    <div className={classNames(styles.menuBarItem)}>
+                    <div className={classNames(styles.menuBarItem, styles.growableMenuBarItem)}>
                         <MenuBarItemTooltip
                             enable
                             id="title-field"
diff --git a/src/components/menu-bar/project-title-input.css b/src/components/menu-bar/project-title-input.css
index 84dcd0afcda19a459d091d4877ab52ea23bdf19c..b1584a374de48e5456356b4b68b0dd5e94c3d2e3 100644
--- a/src/components/menu-bar/project-title-input.css
+++ b/src/components/menu-bar/project-title-input.css
@@ -15,6 +15,8 @@ $title-width: 12rem;
     width: $title-width;
     height: auto;
     padding: .5rem;
+    flex-grow: 1;
+    width: 2rem;
 }
 
 .title-field {