3 All divs here should shrinkwrap to fit their content, except for fill-available
16 display: inline-block;
26 .position-container
> * {
32 box-sizing: border-box;
37 box-sizing: border-box;
40 <div class=
"container">
41 <div class=
"position-container">
43 height: min-content
<br>on this box.
46 <div class=
"position-container">
48 height: max-content
<br>on this box.
51 <div class=
"position-container">
53 height: fit-content
<br>on this box.
58 <div class=
"container">
59 <div class=
"position-container f-a-container">
60 <div class=
"fill-available">
61 height: fill-available
<br> on this box.
66 <div class=
"container">
67 <div class=
"position-container">
69 min-height: min-content
<br>on this box.
73 <div class=
"position-container">
75 min-height: max-content
<br>on this box.
79 <div class=
"position-container">
81 min-height: fit-content
<br>on this box.
86 <div class=
"container">
87 <div class=
"position-container f-a-container">
88 <div class=
"fill-available">
89 min-height: fill-available
<br> on this box.
94 <div class=
"container">
95 <div class=
"position-container">
97 max-height: min-content
<br>on this box.
101 <div class=
"position-container">
103 max-height: max-content
<br>on this box.
107 <div class=
"position-container">
109 max-height: fit-content
<br>on this box.
114 <div class=
"container">
115 <div class=
"position-container f-a-container">
116 <div class=
"fill-available">
117 max-height: fill-available
<br> on this box.