css - Firefox 33 : Flexbox issue with 100% height, justify-content: space-between and child 大于 100%

Question

我这里有一个演示:

https://codepen.io/EightArmsHQ/live/351dcdcc863e14419121099f647998c3

在所有现代浏览器中，边栏所有列表项后都有一个红色按钮

这是通过以下方式完成的:

<div class="menu">
    <ul />
    <button />
</div>

然后是以下 CSS:

.menu{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

问题出在旧版本的 firefox 中，这些行:

  height: 100%;
  justify-content: space-between;

将按钮置于一种“position: absolute; bottom: 0”风格的定位。

有人知道解决此类问题的任何 firefox 解决方法吗？浏览器的最后 36 个版本都很好用 😂

堆栈片段

document.querySelector("#toggle").addEventListener('click', function(){
  document.body.classList.toggle("toggle");
});

main {
  width: 600px;
  margin: 0 auto;
}

.menu {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: scroll;
  background: #fafafa;
}
.menu li {
  padding: 40px 0;
}
.menu .example-a {
  display: none;
}
.menu .example-b {
  display: block;
}
.toggle .menu .example-a {
  display: block;
}
.toggle .menu .example-b {
  display: none;
}

button {
  background: red;
  padding: 20px;
}

<div class="menu">
  <ul class="example-a">
    <li>Ipsa.</li>
    <li>Non.</li>
  </ul>
  
  <ul class="example-b">
    <li>Beatae.</li>
    <li>Consequatur.</li>
    <li>At!</li>
    <li>Nam.</li>
    <li>Quidem.</li>
    <li>Accusamus!</li>
    <li>Ipsum.</li>
    <li>Cumque.</li>
    <li>Recusandae.</li>
    <li>Veniam.</li>
    <li>Omnis?</li>
    <li>Vitae?</li>
    <li>Ut.</li>
    <li>Alias.</li>

  </ul>
  <button>Action</button>
</div>

<main>
  <button id="toggle">Toggle demo</button>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis voluptatum facere minus sit hic ipsum eligendi officiis reprehenderit recusandae tenetur quaerat, provident exercitationem ex impedit beatae commodi voluptate quia sequi.</p>
  <p>Tenetur sapiente minima quia labore repudiandae est, facilis laborum voluptas? Ut sequi earum, magni natus ad a doloremque non, quam sint molestiae consequatur consectetur unde. Nihil nemo voluptatem reiciendis repudiandae?</p>
  <p>Laboriosam esse eius, dignissimos quasi asperiores ea doloribus, eligendi velit, deserunt eum repellendus. Sit et illum voluptatum. Inventore doloremque atque laudantium, esse id dolore itaque placeat quasi veritatis, quae sequi?</p>
  <p>Ea architecto voluptate id blanditiis beatae quas dolore amet mollitia maiores error deserunt nulla enim natus dicta, sint accusamus minus quis quam! Dignissimos officia blanditiis dicta nulla consequuntur eum error?</p>
  <p>Reiciendis voluptates quae adipisci perferendis ullam molestiae, sint corporis laudantium vitae alias blanditiis iure voluptatum voluptas autem? Alias iste numquam porro voluptatem provident pariatur possimus sequi dignissimos. Fuga, molestias ex?</p>
  <p>Consectetur non laborum mollitia optio accusantium, ratione provident voluptas exercitationem soluta quam totam harum quaerat vel fugiat modi minima ab fuga. Dolore velit deserunt numquam nostrum in vero impedit. Maiores.</p>
  <p>Saepe consequuntur dignissimos, maxime distinctio est commodi aspernatur, inventore dolorem ducimus, cumque odio nisi reprehenderit animi? Earum alias maiores, adipisci quis enim iure? Dolorum explicabo ipsa accusamus, vero corporis earum?</p>
  <p>Eos aperiam nisi debitis accusantium suscipit soluta dolorum fuga quas? Nesciunt a nisi alias officia saepe esse excepturi tenetur accusamus minus autem, earum corporis impedit ipsum veniam voluptates magni aperiam!</p>
  <p>Vero ipsum ab repellat dolores rem odit quis aperiam dolore, esse dolorum eveniet dicta, quo aliquam numquam quam voluptates. Officia deserunt quisquam dicta voluptatibus molestias, nulla tempora sit voluptates vitae!</p>
  <p>Sint a eligendi magnam, voluptatum accusamus adipisci enim consequatur labore pariatur, id nostrum omnis maxime quae ipsam fugiat fugit? Rerum in repellendus libero porro veritatis nam odio consequatur et nobis!</p>
  <p>Dolorum vero tempore aspernatur, quos saepe minus ratione, officiis eveniet numquam quibusdam maxime obcaecati facilis similique? Nesciunt maxime officiis voluptatem amet dignissimos illum quos maiores, veniam consequuntur quisquam doloribus delectus!</p>
  <p>Alias voluptate id optio, illo aperiam libero cum repudiandae impedit porro officiis iste enim officia! Reprehenderit quidem qui nobis, sed, reiciendis repudiandae rerum, consequuntur doloribus consequatur eos id molestias officiis?</p>
  <p>At vel quo beatae laborum eius, quaerat distinctio eveniet eaque veritatis, doloremque quae minus illo numquam harum labore suscipit quasi fuga quas quisquam saepe. Quisquam id excepturi quae veniam officia.</p>
  <p>Ex rem animi voluptatibus. Sunt maxime impedit quae neque nesciunt reprehenderit inventore obcaecati eaque corrupti, labore distinctio consectetur quod? Voluptate, error. Aut hic eos dolor praesentium modi porro non temporibus?</p>
  <p>Ipsa accusantium, quod aliquid esse est velit tempora nam rerum sequi magni minima assumenda asperiores dolorem dolorum dolore molestiae corrupti nemo nulla quos beatae expedita vel laudantium numquam! Ipsum, recusandae.</p>
  <p>Architecto ipsam quia laborum repudiandae a similique ducimus vitae explicabo excepturi ut quos repellendus velit iure, quis quo, eligendi illo pariatur mollitia. Iusto aperiam quibusdam quae libero natus quasi repellendus.</p>
  <p>Distinctio consequatur nihil voluptatum itaque esse dolore neque eum voluptate, laborum officiis veritatis reiciendis eos! Tempore perferendis excepturi ratione culpa repellat quae eaque. Officia rem, suscipit aut sunt assumenda repellat!</p>
  <p>Modi, vitae veritatis officiis perferendis cupiditate itaque labore, maiores fugit tenetur deserunt ipsam, consectetur fuga delectus nisi reprehenderit! Aut error eligendi assumenda modi rem necessitatibus praesentium vel, quos tenetur recusandae?</p>
  <p>Perspiciatis iure nihil velit repellat, voluptas similique nesciunt aliquam itaque possimus facere, dolorem et dolor repellendus impedit. Quia voluptatum, nesciunt itaque recusandae esse provident temporibus quos. Deleniti architecto fugit magnam.</p>
  <p>Voluptates, fugit culpa est commodi, unde suscipit porro officia ut obcaecati possimus exercitationem assumenda beatae aut, rerum non velit repellat odit earum nihil! Mollitia pariatur beatae tenetur aliquam optio provident?</p>
  <p>Ipsum velit atque debitis magnam, natus recusandae cumque, assumenda harum in eaque nisi eos sint, quidem corrupti! Quos officiis ipsa quasi neque sed commodi repellendus, adipisci ut minus? Repellat, qui.</p>
  <p>Rem labore voluptatibus maiores molestiae, harum repudiandae est, deleniti, numquam odit ut nesciunt adipisci? Ea, accusamus quaerat! Quam doloribus, error sapiente enim voluptatem laborum architecto consequatur a maiores harum asperiores!</p>
  <p>Blanditiis explicabo tempora saepe consequuntur sunt eligendi nobis. Impedit debitis autem ea animi, recusandae in quia inventore, veniam, velit cumque vero aut? Earum adipisci omnis temporibus consequatur natus, accusantium rem!</p>
  <p>Totam, hic velit quaerat incidunt fugiat corrupti soluta culpa earum est excepturi inventore obcaecati omnis vero at veniam nisi vitae, atque similique ullam nemo molestias nesciunt sint. Temporibus, aperiam earum.</p>
  <p>Voluptates molestias architecto est nesciunt amet commodi similique omnis. Soluta hic corrupti dignissimos. Sed officiis aliquam fugit, libero odio maiores alias recusandae deserunt incidunt, saepe reiciendis modi voluptatem praesentium id!</p>
  <p>Impedit porro velit illo tempore veniam saepe, ea nesciunt deserunt repellendus accusantium aliquam quam dolor quisquam voluptas quis. Eaque iusto provident ipsum officia odio maxime dolorum expedita ducimus tempore molestiae?</p>
  <p>Culpa fugit autem aspernatur, assumenda ex ut rem repellendus vero consequatur laboriosam labore dolorem. Quia voluptas est commodi sit sequi veniam nobis nam, nisi soluta ducimus reiciendis, voluptatibus earum praesentium!</p>
  <p>Eaque amet ab porro provident laudantium alias, deserunt consequatur error optio nihil incidunt repudiandae mollitia, laboriosam, sunt voluptatum eos magnam odit molestias. Quia eveniet facilis inventore, eum ipsam dolorum officia!</p>
  <p>Beatae possimus fugit saepe! Saepe, porro quisquam. Nemo molestias assumenda aut, ullam deserunt cumque porro architecto harum. Nam soluta, repellat voluptatem nihil minima nemo tempore perspiciatis, beatae deleniti, a deserunt?</p>
  <p>Eveniet nesciunt eaque quis eum? Non facere voluptatem eveniet adipisci labore sit, impedit dolor iusto odio totam beatae tenetur possimus assumenda porro sint ab debitis maxime quasi. Sapiente, tenetur asperiores?</p>
  <p>Voluptatem quidem illum atque ipsam tenetur voluptas. Voluptate debitis sunt numquam? Similique aliquam, illo porro ab doloribus tempora, distinctio error officia quidem, culpa in dolores consequatur neque reiciendis quia soluta.</p>
  <p>Laboriosam consequuntur nihil inventore repudiandae cumque eum animi beatae quibusdam, exercitationem perferendis harum reprehenderit, iusto nemo! Ipsum ad at assumenda nisi sapiente eos aut reiciendis, eum est? Ducimus, numquam odit?</p>
  <p>Corporis nihil eligendi nam doloribus sed explicabo minima, expedita optio omnis aliquam. Nulla autem harum cum odio quam quas aperiam quae, deleniti ea assumenda. Porro et sed dicta quos nihil.</p>
  <p>Perferendis minima quasi debitis! Deleniti aut consequuntur ratione modi sit, sapiente itaque doloremque fuga, expedita atque consectetur nulla error illo rerum ullam iste fugiat dolorum blanditiis architecto magni. Provident, magnam.</p>
  <p>Facere itaque ipsa laboriosam, vero explicabo illum optio consectetur quas et harum quis hic ullam nihil debitis sit veritatis delectus, nam ducimus adipisci, excepturi fugiat! Optio eius alias non explicabo.</p>
  <p>Consequuntur voluptatibus, temporibus sint rem error voluptatem nisi totam harum perspiciatis. Quis rerum vero aperiam ea? Cumque iure non animi reiciendis dolorem quia vitae, aspernatur magnam asperiores optio distinctio necessitatibus.</p>
  <p>Obcaecati placeat nihil doloribus eligendi in nobis porro. Nesciunt, dolorem veniam perferendis laboriosam tempore sequi pariatur provident quis voluptatibus officia suscipit nostrum rem quos, unde animi nulla minus ullam aliquid.</p>
  <p>Dolorem asperiores earum nobis repellat laboriosam hic nihil, rem eveniet harum dicta ullam amet modi laudantium! Nemo inventore, quis praesentium ipsa saepe eveniet non recusandae dolorum? Doloribus voluptatum optio veniam.</p>
  <p>Similique vero laborum in dolor, at dolores. Suscipit quidem aut consequuntur? Deserunt modi aliquid quisquam in iure eaque fugiat ipsam unde, laborum magni optio, amet illum labore neque natus maxime.</p>
  <p>Voluptatem et dolorum vero quo cupiditate deserunt atque suscipit sit nobis qui saepe reiciendis dicta, dignissimos harum, nostrum ipsam! Sed rem corporis maiores labore porro accusamus, atque aspernatur libero magnam!</p>
  <p>Veritatis, non? Libero, reiciendis asperiores! Amet placeat at, quo quis molestiae et, odio odit molestias excepturi modi explicabo perspiciatis itaque numquam eius doloremque in repellat eveniet temporibus qui dolor totam.</p>
  <p>Ducimus, accusantium doloremque error deserunt recusandae doloribus ut delectus veritatis libero illo? Molestiae, recusandae dolore ut enim veniam, totam omnis explicabo, ducimus provident beatae odit atque expedita dignissimos optio animi.</p>
  <p>Corporis quidem quas odit blanditiis possimus dicta in, ad consectetur accusantium est facere vitae distinctio obcaecati quasi praesentium officiis quaerat debitis sint error cum laudantium nesciunt nisi. Cupiditate, officia a.</p>
  <p>Hic ratione pariatur magni veniam optio, repellendus, adipisci soluta perferendis beatae eligendi numquam, facere eum inventore aperiam. At officiis ad facere officia corporis id reprehenderit, sapiente illum aperiam obcaecati nam!</p>
  <p>Neque consequuntur, error nisi earum tempore cupiditate illum eligendi vel ducimus accusamus cumque optio, magnam sint voluptas? Perferendis provident sunt aperiam repellendus at placeat nesciunt repudiandae nostrum, laudantium officiis architecto!</p>
  <p>Commodi aut soluta ducimus repudiandae aliquam ipsa. Laboriosam, asperiores? Possimus, ut, ratione alias necessitatibus dolorem, quas nostrum dolor architecto voluptas reiciendis eveniet natus suscipit ipsa labore odit nemo repellat. Maxime.</p>
  <p>Rem dolore explicabo optio vitae repudiandae nam non similique quisquam dolorum inventore est iure ut architecto, voluptatum minima sapiente nesciunt nobis, atque ratione, incidunt exercitationem? Numquam omnis consequatur at architecto.</p>
  <p>Perferendis ipsam, magnam maxime eligendi aliquam quae qui illo magni rerum, sequi unde fuga natus vero a numquam tenetur nisi distinctio ad ab quidem. Fugit ut earum natus magni in.</p>
  <p>Optio nihil, beatae veniam cupiditate id facere delectus earum at, magnam, voluptatibus veritatis aliquid excepturi aperiam repudiandae esse tempora animi obcaecati! In fuga rem quisquam iste beatae odio magni sit!</p>
  <p>Quaerat sequi ea distinctio voluptas odio excepturi ducimus aspernatur, itaque possimus, molestias ut voluptatum quam earum in aperiam blanditiis assumenda voluptatibus tenetur, doloremque pariatur illo inventore esse laborum vel! Esse.</p>
</main>

Answer 1

我特地下载了 Firefox V.33 并找到了解决方案，下面是我的代码。

但我必须说请更新您的浏览器，最新版本大约是 70，希望您能理解。

我们开始吧。

Create a div inside main class and give css it:--
display: flex; flex-direction: column; justify-content: space-between; min-height: 100%;

您可以输入我的代码并在您的浏览器中查看，让我知道它是否有帮助。

HTML

<div class="menu">
  <div class="outer" style="display: flex; flex-direction: column; justify-content: space-between; min-height: 100%;">
    <ul class="example-a">
      <li>Lorem.</li>
      <li>Rerum.</li>
    </ul>
  </div>
</div>

CSS

.menu {
  position: fixed;
  left: 0px;
  top: 0px;
  overflow-y: scroll;
  height: 100vh;
}

.outer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}