column-negative-margin-001-ref.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

<style>

</style>

<body>

<p>When an item with negative margins is placed, ensure that the margin is properly clamped and doesn't cause the running position to regress.</p>

  <div class="grid-lanes">

  <div style="display: flex; flex-direction: column; width: 50px;">

    <div style="background: aquamarine; height: 50px;" >

      item 1

    </div>

    <div style="background: lightblue; height: 50px;" >

      item 4

    </div>

    <div style="background: aquamarine; height: 50px;" >

      item 3

    </div>

    <div style="background: lightpink; height: 50px;">

      item 5

    </div>

  </div>

</body>

</html>