Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 16 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-flexbox/flex-container-min-content-002.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>Flex Container Min-Content Sizes</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
title="9.9.1. Flex Container Intrinsic Main Sizes">
title="9.9.2. Flex Container Intrinsic Cross Sizes">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
.flex {
display: inline-flex;
vertical-align: top;
border: 5px solid magenta;
width: min-content;
height: min-content;
}
.flex.min {
width: 0;
height: 0;
min-width: min-content;
min-height: min-content;
}
.flex.max {
width: 200px;
height: 200px;
max-width: min-content;
max-height: min-content;
}
.flex > div {
font: 25px/1 Ahem;
border: 5px solid cyan;
}
</style>
<!-- Single-line row flex container -->
<div class="flex" style="flex-flow: row nowrap"
data-expected-width="45" data-expected-height="45">
<div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex min" style="flex-flow: row nowrap"
data-expected-width="45" data-expected-height="45">
<div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex max" style="flex-flow: row nowrap"
data-expected-width="45" data-expected-height="45">
<div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex" style="flex-flow: row nowrap"
data-expected-width="80" data-expected-height="70">
<div data-expected-width="35" data-expected-height="60">X X</div>
<div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<div class="flex min" style="flex-flow: row nowrap"
data-expected-width="80" data-expected-height="70">
<div data-expected-width="35" data-expected-height="60">X X</div>
<div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<div class="flex max" style="flex-flow: row nowrap"
data-expected-width="80" data-expected-height="70">
<div data-expected-width="35" data-expected-height="60">X X</div>
<div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<hr>
<!-- Single-line column flex container -->
<div class="flex" style="flex-flow: column nowrap"
data-expected-width="45" data-expected-height="45">
<div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex min" style="flex-flow: column nowrap"
data-expected-width="45" data-expected-height="45">
<div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex max" style="flex-flow: column nowrap"
data-expected-width="45" data-expected-height="45">
<div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex" style="flex-flow: column nowrap"
data-expected-width="45" data-expected-height="130">
<div data-expected-width="35" data-expected-height="60">X X</div>
<div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<div class="flex min" style="flex-flow: column nowrap"
data-expected-width="45" data-expected-height="130">
<div data-expected-width="35" data-expected-height="60">X X</div>
<div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<div class="flex max" style="flex-flow: column nowrap"
data-expected-width="45" data-expected-height="130">
<div data-expected-width="35" data-expected-height="60">X X</div>
<div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<hr>
<!-- Multi-line row flex container -->
<div class="flex" style="flex-flow: row wrap"
data-expected-width="45" data-expected-height="45">
<div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex min" style="flex-flow: row wrap"
data-expected-width="45" data-expected-height="45">
<div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex max" style="flex-flow: row wrap"
data-expected-width="45" data-expected-height="45">
<div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex" style="flex-flow: row wrap"
data-expected-width="45" data-expected-height="130">
<div data-expected-width="35" data-expected-height="60">X X</div>
<div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<div class="flex min" style="flex-flow: row wrap"
data-expected-width="45" data-expected-height="130">
<div data-expected-width="35" data-expected-height="60">X X</div>
<div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<div class="flex max" style="flex-flow: row wrap"
data-expected-width="45" data-expected-height="130">
<div data-expected-width="35" data-expected-height="60">X X</div>
<div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<hr>
<!-- Multi-line column flex container -->
<div class="flex" style="flex-flow: column wrap"
data-expected-width="45" data-expected-height="45">
<div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex min" style="flex-flow: column wrap"
data-expected-width="45" data-expected-height="45">
<div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex max" style="flex-flow: column wrap"
data-expected-width="45" data-expected-height="45">
<div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex" style="flex-flow: column wrap"
data-expected-width="45" data-expected-height="130">
<div data-expected-width="35" data-expected-height="60">X X</div>
<div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<div class="flex min" style="flex-flow: column wrap"
data-expected-width="45" data-expected-height="130">
<div data-expected-width="35" data-expected-height="60">X X</div>
<div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<div class="flex max" style="flex-flow: column wrap"
data-expected-width="45" data-expected-height="130">
<div data-expected-width="35" data-expected-height="60">X X</div>
<div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
document.fonts.ready.then(() => { checkLayout(".flex") });
</script>