css - 如何增加 Firefox(Quantum，v.57+)网址栏的宽度并使导航栏溢出？

Question

我有很多插件，我最初想要的是一个额外的“插件栏”(如 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 溢出，而不是 overflow hidden 按钮是否会在其下方的新行中显示它们？

Answer 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 行，但由于高度限制它们会被裁剪掉。我错过了什么吗？