--- 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/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
@@ -1050,8 +1050,55 @@ 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") {
+  /* Support common XUL attributes in the emulated flex mode so we can
+     test the browser in this configuration without mass-changing existing
+     markup and CSS. */
+  [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; }
+
+  /* This isn't a real solution for [flex] and [ordinal], but it covers enough
+     cases to render the browser chrome. If we get attr() in Bug 435426 this could
+     work for all cases. */
+  [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="100"] { -moz-box-flex: 100; }
+  [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; }
+  [ordinal="1000"] { -moz-box-ordinal-group: 1000; }
+}