时间戳

首页 > 解决方案 > CSS flex 溢出-y firefox 错误

css - CSS flex 溢出-y firefox 错误

问题描述

我正在尝试使 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>

标签： cssfirefoxflexboxoverflow

解决方案

您可以做的是添加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>

推荐阅读