_{<abbr id="11166"></abbr>}

請問下flex布局怎么讓ff兼容呢？

比如.right-b 這塊
想要的效果就是ul高度超出就出滾動條，chrome下是對的
但是ff下就造成整個頁面出了滾動條改怎么破呢·麻煩各位大大支支招，謝啦

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
    border: 0;
  }

  body,
  html {
    height: 100%;
  }


  .content {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .div1 {
    background-color: aqua;
    width: 400px;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .l-t {
    height: 140px;
    background-color: brown;
  }

  .l-b {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .left {
    width: 60px;
    background-color: darkcyan;
  }

  .right {
    width: 340px;
    background-color: chartreuse;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .right-t {
    height: 100px;
    background: forestgreen;
  }

  .right-b {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background: darkgoldenrod;
    overflow-y: scroll;
  }

  .div2 {
    background-color: blanchedalmond;
    display: inline-block;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .div3 {
    background-color: blueviolet;
    width: 400px;
    height: 100%;
    display: inline-block;
  }

  ul li {
    line-height: 400px;
  }
</style>

<body>
  <div class="content">


    <div class="div1">
      <div class="l-t">
      </div>
      <div class="l-b">
        <div class="left">
        </div>
        <div class="right">
          <div class="right-t"></div>
          <div class="right-b">
            <ul>
              <li>啦啦啦</li>
              <li>一柱擎天</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="div2">2</div>
    <div class="div3">3</div>
  </div>
</body>

</html>

回答

編輯回答