47 lines
763 B
HTML
47 lines
763 B
HTML
<!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>
|