flex-box-wrap.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-flexbox/flex-box-wrap.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

<head>

    <title>CSS Flexbox Test: flex-wrap: wrap</title>

    <link rel="author" title="Tsuyoshi Tokuda" href="mailto:tokuda109@gmail.com">

    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property">

    <link rel="match" href="reference/flex-box-wrap-ref.html">

    <meta name="assert" content="the test passes if you see green box.">

    <style type="text/css">

       .flex-box {

         position: relative;

         display: flex;

         flex-wrap: wrap;

         margin: 0;

         padding-left: 0;

         width: 200px;

       .flex-item,

       .error {

         list-style-type: none;

         width: 120px;

         height: 100px;

         background-color: green;

       .error {

         position: absolute;

         top: 100px;

         left: 0;

         background-color: red;

         z-index: -1;

    </style>

</head>

<body>

    <p>There should be a green block with no red.</p>

    <ul class="flex-box">

      <li class="flex-item">width: 120px</li>

      <li class="flex-item">width: 120px</li>

      <li class="error"></li>

    </ul>

</body>

</html>