如何增加 Firefox (Quantum, v. 57+) url 栏的宽度并使导航栏溢出？答案

【问题标题】：How can I increase the width of Firefox's (Quantum, v. 57+) url bar and make the navbar overflow?如何增加 Firefox (Quantum, v. 57+) url 栏的宽度并使导航栏溢出？
【发布时间】：2018-08-02 20:32:35
【问题描述】：

我有很多插件，我最初想要的是一个额外的“插件栏”（如the "Addon bar restored"），我可以在其中放置插件的按钮。不幸的是，Firefox Quantum（版本 57+）仅接受 userChrome.css 文件中的 WebExtensions 或 CSS 代码。我正在尝试第二个选项：修改 .css 文件以使 url 栏的宽度与我想要的一样大，并使导航栏的溢出在其下方创建一个“第二个”栏（或者更确切地说，第二行），其中溢出的插件按钮将保留。

使用以下代码，我可以将urlbar-container 的宽度增加到我想要的宽度，但nav-bar 不会溢出，因此插件的按钮不会溢出到第二行。

#urlbar-container {
    min-width: 1000px !important;
}

#nav-bar {
    //dsplay: block;
    overflow-x: visible !important;
    overflow-y: visible !important;
    overflow: visible !important;
    max-height: 500px !important;       
}

有谁知道我可以如何：1- 增加 urlbar-container 的宽度和 2- 使 nav-bar 溢出，这样就不会隐藏溢出的按钮，而是将它们显示在其下方的新行中？

【问题讨论】：

标签： css firefox flexbox

【解决方案1】：

这是一个有效的代码：

#urlbar {
    width: 100%;
}

#urlbar-container {
    //min-width: 1000px !important;
    flex: 0 0 80% !important; /*change the size to what you like*/
}

#nav-bar-customization-target {
    display: flex;
    flex-wrap: wrap !important;
    align-items: center;
    align-content: center;
}

#nav-bar {
    min-height: 80px;
    height: 100%;
}

它运作良好，但我希望我可以将规则 min-height: 80px 替换为 #nav-bar 中不那么老套的东西。我试过2em 和200%，但只有像素有效。这很糟糕，因为如果我减小窗口的宽度，则会创建新的 flex 行，但由于高度限制，它们会被裁剪掉。我错过了什么吗？

【讨论】：