| <!DOCTYPE html> |
| <link href="resources/width-keyword-classes.css" rel="stylesheet"> |
| <style> |
| .block { |
| width: 0px; |
| font: 10px/1 Ahem; |
| } |
| |
| .flex { |
| display: flex; |
| } |
| |
| .grid { |
| display: grid; |
| grid-template-columns: 0px; |
| } |
| |
| .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 min-width-fill-available">item</div> |
| </div> |
| |
| <hr> |
| |
| <h2>flex</h2> |
| |
| <div class="block flex"> |
| <div class="item min-width-fill-available">item</div> |
| </div> |
| |
| <hr> |
| |
| <h2>grid</h2> |
| |
| <div class="block grid"> |
| <div class="item min-width-fill-available">item</div> |
| </div> |
