<!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>