| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>CSS Flex-basis Test</title> | |
| <link rel="author" title="Chunsheng Zhang" href="mailto:zhangcs_423@163.com" /> | |
| <style type="text/css"> | |
| #container { | |
| border: 5px solid green; | |
| width: 600px; | |
| height: 200px; | |
| padding: 5px; | |
| border-radius: 3px; | |
| position: absolute; | |
| top: 70px; | |
| left: 10px; | |
| } | |
| #flex { | |
| border: 2px dotted blue; | |
| background: green; | |
| border-radius: 3px; | |
| position: absolute; | |
| top: 73px; | |
| left: 166.5px; | |
| width: 253px; | |
| height: 40px; | |
| padding: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p>This case tests that flex items flexibility</p> | |
| <p>The test passes if there is no red</p> | |
| <section id="container"> | |
| <div id="flex"></div> | |
| </section> | |
| </body> | |
| </html> |