flexbox-min-height-auto-004.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-flexbox/flexbox-min-height-auto-004.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<!--

     Any copyright is dedicated to the Public Domain.

     http://creativecommons.org/publicdomain/zero/1.0/

-->

<html>

  <head>

    <meta charset="utf-8">

    <title>CSS Test: Testing min-height:auto & 'overflow' interaction</title>

    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto">

    <link rel="match" href="flexbox-min-height-auto-004-ref.html">

<!--

     This testcase checks how "overflow-x" indirectly impacts the sizing

     behavior of flex items with "min-height:auto" (the new initial value

     for "min-height"), via its influence on "overflow-y".

     In particular, the flex-item-specific "min-height:auto" behavior is

     supposed to be disabled (e.g. we end up with min-height:0) when

     "overflow-y" is non-"visible".  Moreover, when "overflow-x" is set to a

     scrolling value, it forces "overflow-y" to compute to a scrolling value

     as well, as described at

       http://www.w3.org/TR/css-overflow-3/#overflow-properties

     So, "overflow-x" has an indirect effect (via "overflow-y") here.

-->

    <style>

      .flexbox {

        display: flex;

        flex-direction: column;

        height: 30px;  /* Shrink flex items below min-height */

        margin-right: 2px; /* (Just for spacing things out, visually) */

        float: left;

      .flexbox > * {

        /* Flex items have purple border: */

        border: 2px dotted purple;

      .flexbox > * > * {

        /* Flex items' contents are gray & fixed-size: */

        background: gray;

        width: 40px;

        height: 80px;

      .xvisible { overflow-x: visible; }

      .xhidden  { overflow-x: hidden;  }

      .xscroll  { overflow-x: scroll;  }

      .xauto    { overflow-x: auto;    }

    </style>

  </head>

  <body>

    <!-- min-height:auto should prevent shrinking below intrinsic height when

         the flex item has "overflow-x: visible", but not for any other

         overflow-x values (because of overflow-x's influence on overflow-y).

-->

    <div class="flexbox"><div class="xvisible"><div></div></div></div>

    <div class="flexbox"><div class="xhidden"><div></div></div></div>

    <div class="flexbox"><div class="xscroll"><div></div></div></div>

    <div class="flexbox"><div class="xauto"><div></div></div></div>

  </body>

</html>