06-basic-visual-formatting/fit-content-sizing.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Fit-content sizing</title>
<link rel="stylesheet" type="text/css" href="c/basic.css">
<style type="text/css">
.arena {display: flex; align-items: start;}
body {width: auto; font: 1.25em/1.25 Calibri, Arial, Helvetica, sans-serif;}
[id^="cb"] {margin: 4em 0.25em 0; flex-basis: 33%; position: relative;}
[id^="cb"] p {background: silver;}
[id^="cb"] code {font-size: 95%;}
</style>
<style type="text/css">
[id^="cb"] {border: 1px solid;}  /* "cb" for "containing block" */
p {width: fit-content;}
 </style>
</head>
<body>

<main class="arena">

<div id="cb1"><p>This content is short.</p></div>
<div id="cb2"><p>This content is a little bit longer.</p></div>
<div id="cb3"><p>This is a lot of content that will end up wrapping to multiple lines, because there is so darn much of it, just going on and on as if the author is being paid by the word.</p></div>
</main>

</body>
</html>