<?xml version="1.0" encoding="UTF-8"?> <!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ --> <!-- Reference case for behavior of flex containers that have no children --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> div.flexbox { border: 1px dotted blue; background: yellow; } div.withPadding { padding: 2px 3px 4px 5px; } </style> </head> <body> <div class="flexbox"/> <div class="flexbox" style="width: 5px"/> <div class="flexbox" style="width: -moz-available"/> <div class="flexbox" style="width: max-content"/> <div class="flexbox" style="width: min-content"/> <div class="flexbox" style="height: 6px"/> <div class="flexbox" style="width: 7px; height: 8px"/> <!-- now with padding --> <div class="flexbox withPadding"/> <div class="flexbox withPadding" style="width: 5px"/> <div class="flexbox withPadding" style="width: -moz-available"/> <div class="flexbox withPadding" style="width: max-content"/> <div class="flexbox withPadding" style="width: min-content"/> <div class="flexbox withPadding" style="height: 6px"/> <div class="flexbox withPadding" style="width: 7px; height: 8px"/> </body> </html>