pulsar-edit/pulsar
1
1
Fork 0
mirror of https://github.com/pulsar-edit/pulsar.git synced 2024-09-20 15:37:46 +03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Nathan Sobo 2012-06-26 15:23:06 -06:00
parent e2efa95d13
commit b8ed28ba6a
1 changed files with 69 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
docs/flexbox-test-2.html Normal file
View File

@ -0,0 +1,69 @@
<!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>