tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

flexbox-definite-sizes-005.html (1209B)

      1 <!doctype html>
      2 <meta charset="utf-8">
      3 <title>CSS Test: nested flex containers with definite max-height</title>
      4 <link rel="match" href="flexbox-definite-sizes-005-ref.html">
      5 <link rel="author" href="mailto:dholbert@mozilla.com" title="Daniel Holbert">
      6 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes">
      7 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1503173">
      8 <style>
      9  .horizFlex {
     10    display: flex;
     11    margin-bottom: 2px;
     12  }
     13  .vertFlex {
     14    display: flex;
     15    flex-grow: 1;
     16    flex-direction: column;
     17    min-height: 60px;
     18  }
     19  .item {
     20    background: lime;
     21    height: 100%;
     22  }
     23 </style>
     24 <p>Test passes if you see four 60px-tall lime rows (with platform-appropriate scrollbars on the last one).</p>
     25 
     26 <div class="horizFlex">
     27  <div class="vertFlex">
     28    <div class="item"></div>
     29  </div>
     30 </div>
     31 
     32 <div class="horizFlex">
     33  <div class="vertFlex" style="overflow: hidden">
     34    <div class="item"></div>
     35  </div>
     36 </div>
     37 <div class="horizFlex">
     38  <div class="vertFlex" style="overflow: auto">
     39    <div class="item"></div>
     40  </div>
     41 </div>
     42 
     43 <div class="horizFlex">
     44  <div class="vertFlex" style="overflow: scroll">
     45    <div class="item"></div>
     46  </div>
     47 </div>