| <!DOCTYPE html> | |
| <link href="resources/width-keyword-classes.css" rel="stylesheet"> | |
| <style> | |
| .block { | |
| width: 0px; | |
| font: 10px/1 Ahem; | |
| } | |
| .item { | |
| border: 5px solid magenta; | |
| background: cyan; | |
| } | |
| </style> | |
| <p>Checking out that 'min-width' as 'fill-available' respects border and padding sizes when container size is 0px, behaving like min-width: auto.</p> | |
| <h2>block</h2> | |
| <div class="block"> | |
| <div class="item">item</div> | |
| </div> | |
| <hr> | |
| <h2>flex</h2> | |
| <div class="block"> | |
| <div class="item">item</div> | |
| </div> | |
| <hr> | |
| <h2>grid</h2> | |
| <div class="block"> | |
| <div class="item">item</div> | |
| </div> |