<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: blue;
      }

      #flexbox-container {
        background: black;
        top: 100px;
        left: 100px;
        height: 200px;
        width: 400px;
        display: -webkit-flex;
        display: -moz-flex;
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        overflow: hidden;
        border: 1px solid navy;
        -webkit-align-items: stretch;
        -moz-align-items: stretch;
      }

      #flexbox-item-1 {
        background: green;
        overflow: hidden;
        -webkit-flex: 1;
        -moz-flex: 1;
      }

      #flexbox-item-2 {
        overflow: scroll;
        background: orange;
        -webkit-flex: 1;
        -moz-flex: 1;
      }
    </style>
  </head>
  <body>
    <div id="flexbox-container">
      <div id="flexbox-item-1">
        <div id="flexbox-item-1-content">
          My cross size (height) should be equal to the height of my flexbox container. I should overflow, because my height should be too short to contain all my content.
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
          <div>10</div>
          <div>11</div>
          <div>12</div>
          <div>13</div>
          <div>14</div>
          <div>15</div>
        </div>
      </div>
      <div id="flexbox-item-2">
        My cross size (height) should also be equal to the height of my flexbox container, but I don't overflow.
      </div>
    </div>
  </body>
</html>



Add test of flexbox cross-axis size forcing overflow that breaks in Canary 22.0.1187.0
Add test of flexbox cross-axis size forcing overflow that breaks in Canary 22.0.1187.0
