Multi Row Tabs in Firefox Quantum

The Tab Mix Plus addon stopped working with v57 :-(

  1. [this may not be needed] Open the developer toolbar (firefox menu -> Web Developer -> Developer Toolbar) and click settings (gear icon). Check “Enable browser chrome and add-on debugging toolboxes” under “Advanced Settings”.
  2. Open a new tab on about:support
  3. Click the button next to “Profile Folder”
  4. Go to the “chrome” directory at the profile folder, or create it if it doesn’t exist.
  5. Create a file named “userChrome.css” (if it doesn’t exist) and open it in a text editor.
  6. Copy the css code from
    (copy of the css is at the bottom of this post)
  7. Paste it into userChrome.css and save.
  8. Restart Firefox

Update for v58: Changed .tabbrowser-tabs to #tabbrowser-tabs.

Update for v65: Removed #titlebar related stuff


.tabbrowser-tab:not([pinned]) {
.tabbrowser-tab,.tab-background {
.tab-stack {
    width: 100%;
#tabbrowser-tabs .scrollbox-innerbox {
    display: flex;
    flex-wrap: wrap;
#tabbrowser-tabs .arrowscrollbox-scrollbox {
    overflow: visible;
    display: block;
#tabbrowser-tabs .scrollbutton-up,#tabbrowser-tabs .scrollbutton-down,#alltabs-button,.tabbrowser-tab:not([fadein]){
    display: none;
#main-window[sizemode="maximized"] #TabsToolbar{
    height:var(--tab-min-height) !important;
    margin-bottom:calc(var(--tab-min-height)*-1) !important;
#main-window[sizemode="maximized"] #titlebar{
    margin-bottom:calc(6px + var(--tab-min-height)*-1) !important;
    margin-bottom:0 !important;
#titlebar:active #titlebar-content{
    margin-bottom:var(--tab-min-height) !important;

Based on instructions here.