--- a/browser/base/content/browser-tabsintitlebar.js
+++ b/browser/base/content/browser-tabsintitlebar.js
@@ -267,17 +267,17 @@ var TabsInTitlebar = {
       menubar.style.paddingBottom = "";
     }
 
     ToolbarIconColor.inferFromText("tabsintitlebar", TabsInTitlebar.enabled);
   },
 
   _sizePlaceholder(type, width) {
     Array.forEach(document.querySelectorAll(".titlebar-placeholder[type='" + type + "']"),
-                  function(node) { node.width = width; });
+                  function(node) { node.style.width = width + "px"; });
   },
 
   uninit() {
     this._initialized = false;
     removeEventListener("resolutionchange", this);
     Services.prefs.removeObserver(this._prefName, this);
     this._menuObserver.disconnect();
     CustomizableUI.removeListener(this);

--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -92,16 +92,28 @@ panelview[mainview] > .panel-header {
 tabbrowser {
   -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser");
 }
 
 #tabbrowser-tabs {
   -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-tabs");
 }
 
+@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
+  #tabbrowser-tabs {
+    /* Without this, the tabs container width extends beyond the window width */
+    width: 0;
+  }
+  .tab-stack {
+    /* Without this, pinned tabs get a bit too tall when the tabstrip overflows. */
+    vertical-align: top;
+  }
+}
+
+
 #tabbrowser-tabs:not([overflow="true"]) ~ #alltabs-button,
 #tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow="true"]) ~ #new-tab-button,
 #tabbrowser-tabs[overflow="true"] > .tabbrowser-arrowscrollbox > .tabs-newtab-button,
 #tabbrowser-tabs:not([hasadjacentnewtabbutton]) > .tabbrowser-arrowscrollbox > .tabs-newtab-button,
 #TabsToolbar[customizing="true"] > #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .tabs-newtab-button {
   visibility: collapse;
 }
 

--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@@ -304,16 +304,24 @@ description#identity-popup-content-verif
 
 /* PERMISSIONS */
 
 #identity-popup-permissions-content {
   background-image: url(chrome://browser/skin/controlcenter/permissions.svg);
   padding-bottom: 1.5em;
 }
 
+@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
+  /* The extra padding-bottom is there to work around XUL flex (Bug 1368281).
+     This rule and the 1.5em above can both be removed once we are only using CSS flex. */
+  #identity-popup-permissions-content {
+    padding-bottom: 1em;
+  }
+}
+
 #identity-popup-permissions-headline {
   /* Make sure the label is as tall as the icon so that the permission list
      which is aligned with the icon doesn't cover it up. */
   min-height: 24px;
 }
 
 #identity-popup-permission-list {
   /* Offset the padding set on #identity-popup-permissions-content so that it

--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -202,17 +202,17 @@ panel[photon] > .panel-arrowcontainer > 
 }
 
 #wrapper-edit-controls:-moz-any([place="palette"],[place="menu-panel"]) > #edit-controls,
 #wrapper-zoom-controls:-moz-any([place="palette"],[place="menu-panel"]) > #zoom-controls {
   margin-inline-start: 0;
 }
 
 #BMB_bookmarksPopup {
-  max-width: @standaloneSubviewWidth@;
+  width: @standaloneSubviewWidth@;
 }
 
 #pageActionFeedback > .panel-arrowcontainer > .panel-arrowbox {
   /* Don't display the arrow but keep the popup at the same vertical
      offset as other arrow panels. */
   visibility: hidden;
 }
 

--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -40,16 +40,29 @@ tabbrowser {
 #tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
   min-height: var(--tab-min-height);
 }
 
 .tab-stack {
   min-height: inherit;
 }
 
+@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
+  .tab-stack {
+    /* Needed to allow tabs to shrink to be skinnier than their page-title: */
+    min-width: 0;
+  }
+  .scrollbox-innerbox {
+    /* Needed to prevent tabstrip from growing as wide as the sum of the tabs'
+       page-title widths (when we'd rather have it be as wide as the window and
+       compress the tabs to their minimum size): */
+    max-width: 100%;
+  }
+}
+
 .tabbrowser-tab {
   -moz-appearance: none;
   background-color: transparent;
   border-radius: 0;
   border-width: 0;
   margin: 0;
   padding: 0;
   -moz-box-align: stretch;

--- a/toolkit/content/textbox.css
+++ b/toolkit/content/textbox.css
@@ -15,16 +15,26 @@ html|*.textbox-input {
 
 html|*.textbox-textarea {
   -moz-appearance: none !important;
   text-shadow: inherit;
   box-sizing: border-box;
   -moz-box-flex: 1;
 }
 
+
+@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
+  html|*.textbox-input,
+  html|*.textbox-textarea {
+    /* Be block-level, so that -moz-box-flex can take effect, when we are an item
+       in a -moz-box being emulated by modified modern flex. */
+    display: block;
+  }
+}
+
 /*
 html|*.textbox-input::placeholder,
 html|*.textbox-textarea::placeholder {
   text-align: left;
   direction: ltr;
 }
 
 html|*.textbox-input::placeholder:-moz-locale-dir(rtl),

--- a/toolkit/content/xul.css
+++ b/toolkit/content/xul.css
@@ -164,16 +164,26 @@ toolbar[mode="text"] .toolbarbutton-icon
 /******** browser, editor, iframe ********/
 
 browser,
 editor,
 iframe {
   display: inline;
 }
 
+@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
+  browser,
+  editor,
+  iframe {
+    /* Old and new flex are different in this case... emulation for webkit requires inline children to
+       **not** be converted to block. */
+    display: block;
+  }
+}
+
 browser {
   -moz-binding: url("chrome://global/content/bindings/browser.xml#browser");
 }
 
 browser[remote=true]:not(.lightweight) {
   -moz-binding: url("chrome://global/content/bindings/remote-browser.xml#remote-browser");
 }
 
@@ -293,28 +303,30 @@ toolbar[customizing="true"][hidden="true
      Override it while customizing. */
   display: -moz-box;
 }
 
 %ifdef XP_MACOSX
 toolbar[type="menubar"] {
   min-height: 0 !important;
   border: 0 !important;
+  padding: 0 !important;
 }
 %else
 toolbar[type="menubar"][autohide="true"] {
   -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-menubar-autohide");
   overflow: hidden;
 }
 
 toolbar[type="menubar"][autohide="true"][inactive="true"]:not([customizing="true"]) {
   min-height: 0 !important;
   height: 0 !important;
   -moz-appearance: none !important;
   border-style: none !important;
+  padding: 0 !important;
 }
 %endif
 
 toolbarseparator {
   -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbardecoration");
 }
 
 toolbarspacer {
@@ -1054,8 +1066,47 @@ tabmodalprompt {
 .button-highlightable-text:not([highlightable="true"]),
 .button-text[highlightable="true"],
 .menulist-highlightable-label:not([highlightable="true"]),
 .menulist-label[highlightable="true"],
 .menu-iconic-highlightable-text:not([highlightable="true"]),
 .menu-iconic-text[highlightable="true"] {
   display: none;
 }
+
+@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
+  [flex="1"] { -moz-box-flex: 1; }
+  [flex="2"] { -moz-box-flex: 2; }
+  [flex="3"] { -moz-box-flex: 3; }
+  [flex="4"] { -moz-box-flex: 4; }
+  [flex="5"] { -moz-box-flex: 5; }
+  [flex="6"] { -moz-box-flex: 6; }
+  [flex="7"] { -moz-box-flex: 7; }
+  [flex="8"] { -moz-box-flex: 8; }
+  [flex="9"] { -moz-box-flex: 9; }
+  [flex="400"] { -moz-box-flex: 400; }
+  [flex="1000"] { -moz-box-flex: 1000; }
+
+  [ordinal="1"] { -moz-box-ordinal-group: 1; }
+  [ordinal="2"] { -moz-box-ordinal-group: 2; }
+  [ordinal="3"] { -moz-box-ordinal-group: 3; }
+  [ordinal="4"] { -moz-box-ordinal-group: 4; }
+  [ordinal="5"] { -moz-box-ordinal-group: 5; }
+  [ordinal="6"] { -moz-box-ordinal-group: 6; }
+  [ordinal="7"] { -moz-box-ordinal-group: 7; }
+  [ordinal="8"] { -moz-box-ordinal-group: 8; }
+  [ordinal="9"] { -moz-box-ordinal-group: 9; }
+
+  [orient="vertical"] { -moz-box-orient: vertical; }
+  [orient="horizontal"] { -moz-box-orient: horizontal; }
+
+  [dir="reverse"] { -moz-box-direction: reverse; }
+
+  [align="start"] { -moz-box-align: start; }
+  [align="center"] { -moz-box-align: center; }
+  [align="end"] { -moz-box-align: end; }
+  [align="baseline"] { -moz-box-align: baseline; }
+  [align="stretch"] { -moz-box-align: stretch; }
+
+  [pack="start"] { -moz-box-pack: start; }
+  [pack="center"] { -moz-box-pack: center; }
+  [pack="end"] { -moz-box-pack: end; }
+}

--- a/toolkit/themes/linux/global/global.css
+++ b/toolkit/themes/linux/global/global.css
@@ -84,16 +84,22 @@ window.dialog {
 iframe {
   border: none;
   width: 100px;
   height: 100px;
   min-width: 10px;
   min-height: 10px;
 }
 
+@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
+  iframe {
+    width: initial;
+  }
+}
+
 /* XXXBlake yeah, shoot me -- these don't belong here.  I'll move them later. */
 
 sidebarheader {
   min-height: 25px;
   text-shadow: none;
 }
 
 sidebarheader > label {

--- a/toolkit/themes/osx/global/global.css
+++ b/toolkit/themes/osx/global/global.css
@@ -79,16 +79,22 @@ window.dialog {
 iframe {
   border: none;
   width: 100px;
   height: 100px;
   min-width: 10px;
   min-height: 10px;
 }
 
+@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
+  iframe {
+    width: initial;
+  }
+}
+
 /* ::::: miscellaneous formatting ::::: */
 
 sidebarheader {
   background-color: -moz-Dialog;
   color: -moz-dialogText;
   text-shadow: none;
 }
 

--- a/toolkit/themes/windows/global/global.css
+++ b/toolkit/themes/windows/global/global.css
@@ -95,16 +95,22 @@ window.dialog {
 iframe {
   border: none;
   width: 100px;
   height: 100px;
   min-width: 10px;
   min-height: 10px;
 }
 
+@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
+  iframe {
+    width: initial;
+  }
+}
+
 /* XXXBlake yeah, shoot me -- these don't belong here.  I'll move them later. */
 
 sidebarheader {
   min-height: 25px;
   text-shadow: none;
 }
 
 sidebarheader > label {