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％的最大高度减去动作栏的高度，它似乎可以解决问题：< / p>

＆＃13;

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;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

Updated Pen

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

1 个答案: