CSS flex 溢出-y firefox 错误答案

【问题标题】：CSS flex overflow-y firefox bugCSS flex 溢出-y firefox 错误
【发布时间】：2021-04-01 14:45:33
【问题描述】：

我正在尝试让 2 个垂直的 flex 容器填满屏幕并且都可以滚动。我可以让它在 chrome 中正常工作，但 Firefox 失败了。当内容被动态插入时，它的容器会扩展以适应内容，而不是保持弯曲并显示滚动条。要查看问题，请在 chrome vs firefox 中打开此 jsfiddle，然后单击 fill top 按钮。

https://jsfiddle.net/np6jgs45/4/

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <script>
    function fillit() {
        document.getElementById('tophalf').innerHTML = "shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>";
    }
    </script>
  </head>

  <body style="margin: 0; padding: 0;">
    <div style="height: 100vh; display: flex; flex-direction: column;">
      <div style="padding: 20px; background-color: gray;">header</div>

      <div style="flex: 1; display: flex; flex-direction: row;">
        <nav style="background-color: rgb(238, 238, 198); width: 200px;">
          menu<br />
          <button onClick="fillit()">fill top</button>
        </nav>
        <div style="flex: 1; display: flex; flex-direction: column;">
          <div
            style="
              flex: 1;
              display: flex;
              background: repeating-linear-gradient(
                45deg,
                #f7f7f7,
                #f7f7f7 10px,
                #f1f1f1 10px,
                #f1f1f1 20px
              );
              align-items: center;
              flex-direction: column;
            "
          >
            <div
              style="
                flex: 1;
                width: 600px;
                display: flex;
                position: relative;
                max-width: 100%;
                flex-direction: column;
                height: 0px;
              "
            >
              <div
                id="tophalf"  
                style="
                  flex: 1;
                  overflow-y: auto;
                  background-color: rgba(250, 158, 158, 0.521);
                "
              ></div>
              <div
                style="
                  flex: 1;
                  overflow-y: auto;
                  background-color: rgba(144, 243, 144, 0.555);
                "
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

【问题讨论】：

请在此处分享您的代码，这样我们就不必离开现场

标签： css firefox flexbox overflow

【解决方案1】：

您可以做的是将height: 50%;添加到上半部和下半部div，然后将包含div的高度从0更改为max-height: 90vh;，它应该可以在Firefox中工作。

如果你想玩弄它，这里是小提琴：https://jsfiddle.net/9h7z4udy/

看这里：

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <script>
    function fillit() {
        document.getElementById('tophalf').innerHTML = "shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>shus<br/>";
    }
    </script>
  </head>

  <body style="margin: 0; padding: 0;">
    <div style="height: 100vh; display: flex; flex-direction: column;">
      <div style="padding: 20px; background-color: gray;">header</div>

      <div style="flex: 1; display: flex; flex-direction: row;">
        <nav style="background-color: rgb(238, 238, 198); width: 200px;">
          menu<br />
          <button onClick="fillit()">fill top</button>
        </nav>
        <div style="flex: 1; display: flex; flex-direction: column;">
          <div
            style="
              flex: 1;
              display: flex;
              background: repeating-linear-gradient(
                45deg,
                #f7f7f7,
                #f7f7f7 10px,
                #f1f1f1 10px,
                #f1f1f1 20px
              );
              align-items: center;
              flex-direction: column;
            "
          >
            <div
              style="
                flex: 1;
                width: 600px;
                display: flex;
                position: relative;
                max-width: 100%;
                flex-direction: column;
                max-height: 90vh;
              "
            >
              <div
                id="tophalf"  
                style="
                  flex: 1;
                  height: 50%;
                  overflow-y: auto;
                  background-color: rgba(250, 158, 158, 0.521);
                "
              ></div>
              <div
                style="
                  flex: 1;
                    height: 50%;
                  
                  overflow-y: auto;
                  background-color: rgba(144, 243, 144, 0.555);
                "
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

【讨论】：

我不想使用绝对高度。我的标题高度实际上是动态的。 flex 应该是灵活的。这就是重点。