Firefox 在 flex 和容器方面存在问题，隐藏了溢出

Question

我已经做了一个小代码笔来演示我的问题。

在 chrome 中，它像预期的那样工作，但在 Firefox 中溢出：隐藏样式似乎不起作用。它将我的内容扩展到整个页面。

您可以在 js 部分中注释掉内部 HTML，您会看到布局在没有内容的情况下工作。

我也玩了最小高度：0，但没有任何结果。

.html

<div class="l-page">
    <header class="page-header"></header>
        <main class="page-content">
            <div class="page-content__inner">
                <div class="boxes">
                    <div class="box">{{content}}</div>
                    <div class="box">{{content}}</div>
                </div>
            <div class="actionbar"></div>
        </div>
    </main> 
</div>

.css

.l-page{
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
}
.page-header{
  height: 100px;
  background-color: green;
}
.page-content{
  flex: 1;
  background-color: wheat;
  padding: 50px;
  display: flex;
}
.page-content__inner{
  flex: 1;
  display: flex;
  flex-direction: column;
}
.boxes{
  flex: 1;
  display: flex;
}
.box{
  overflow-y: scroll;
  width: 100%;
  background-color: whitesmoke;
  padding: 20px;
  flex: 1;
}
.box+.box{
  margin-left: 20px;
}
.actionbar{
  height: 50px;
  background-color: red;
}

更新操作栏的高度可能会有所不同。它只是设置为 50px 以简化事情。

Answer 1

你的盒子似乎增长超过允许的高度 - 如果您将其大小设置为最大高度 100% 减去操作栏的高度，它似乎可以解决问题：

const content = 'Mit Hilfe des Blindtextes kann die Verteilung des Textes auf der Seite (Layout oder Satzspiegel) sowie Lesbarkeit und Platzbedarf der verwendeten Schriftarten (Typografie) beurteilt werden. Er besteht aus einer mehr oder minder sinnlosen Folge von Wörtern, oft auch nur aus wortähnlichen Silbenfolgen. Ein bekanntes Beispiel dafür ist das „lateinische“ Lorem ipsum. Komponisten von Liedern benutzen Blindtexte beim Komponieren von Melodien und singen diese, bevor der Liedtext gedichtet wird. Andere Texte dienen dazu, die Eigenheiten der Schriftarten miteinander vergleichen zu können. In solchen Pangrammen werden möglichst alle Buchstaben und Sonderzeichen des jeweiligen sprachtypischen Alphabets bei einer möglichst geringen Gesamtlänge des Satzes beziehungsweise der Sätze verwendet. Bekannte Beispiele sind: „Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.“ (bekannt aus der Schriftenanzeige von Microsoft Windows)„Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.“ (bekannt aus der Schriftenanzeige von KDE)„The quick brown fox jumps over the lazy dog“ (englisch für „Der schnelle braune Fuchs springt über den faulen Hund“) „Jackdaws love my big sphinx of quartz.“ (Dohlen lieben meine große Sphinx aus Quarz)„Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich“„Die heiße Zypernsonne quälte Max und Victoria ja böse auf dem Weg zur Küste“„Fix Schwyz! quäkt Jürgen blöd vom Paß“ – dieser Satz ist das einzige im Deutschen bekannte echte Pangramm, das jeden Buchstaben, einschließlich der Umlaute und des ß, genau einmal enthält (nach der neuen Rechtschreibung wird allerdings „Pass“ mit „ss“ geschrieben)„Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.“ - eine Art verballhorntes Latein. Es geht allerdings auch noch kürzer: Schriftmusterwörter wie „Hamburgefonts“ stellen den Charakter einer Schrift dar, ohne das ganze Alphabet zu verwenden. Mit Hilfe des Blindtextes kann die Verteilung des Textes auf der Seite (Layout oder Satzspiegel) sowie Lesbarkeit und Platzbedarf der verwendeten Schriftarten (Typografie) beurteilt werden. Er besteht aus einer mehr oder minder sinnlosen Folge von Wörtern, oft auch nur aus wortähnlichen Silbenfolgen. Ein bekanntes Beispiel dafür ist das „lateinische“ Lorem ipsum. Komponisten von Liedern benutzen Blindtexte beim Komponieren von Melodien und singen diese, bevor der Liedtext gedichtet wird. Andere Texte dienen dazu, die Eigenheiten der Schriftarten miteinander vergleichen zu können. In solchen Pangrammen werden möglichst alle Buchstaben und Sonderzeichen des jeweiligen sprachtypischen Alphabets bei einer möglichst geringen Gesamtlänge des Satzes beziehungsweise der Sätze verwendet. Bekannte Beispiele sind:';
document.querySelectorAll('.ff')[0].innerHTML = content;
document.querySelectorAll('.box')[1].innerHTML = content;
document.querySelectorAll('.box')[1].innerHTML += content;
document.querySelectorAll('.box')[1].innerHTML += content;

.l-page{
  -webkit-overflow-scrolling: touch;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
}
.ff{
  min-height:0;
}
.page-header{
  height: 100px;
  background-color: green;
}
.page-content{
  flex-grow: 1;
  background-color: wheat;
  padding: 50px;
  position:relative;
}
.page-content__inner{
  position:absolute;
  left:50px;
  right:50px;
  top:50px; 
  bottom:50px;
  display: flex;
  flex-direction: column;
}
.boxes {
  flex-grow:1;
  display:flex; 
  flex-direction:row;
  max-height: calc(100% - 50px);
}
.box{
  overflow-y: scroll;
  width: 100%;
  background-color: whitesmoke;
  padding: 20px;
  flex-grow: 1;
}
.box+.box{
  margin-left: 20px;
}
.actionbar{
  height: 50px;
  background-color: red;
}

<div class="l-page">
  <header class="page-header"></header>
  <main class="page-content">
    <div class="page-content__inner">
      <div class="boxes">
        <div class="box">
          <div class="ff"></div>
        </div>
        <div class="box"></div>
      </div>
      <div class="actionbar"></div>
    </div>
  </main> 
</div>

根据评论 - 动作栏没有固定高度 - 似乎您需要设置最小和最大高度：

更新的笔