Firefox 的 flex 和容器存在问题，溢出隐藏

Question

我做了一个小的codepen 来证明我的问题。

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

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

我也玩过 min-height: 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>

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

Updated Pen