| <!DOCTYPE html> |
| <title>Flex Container Max-Content Main Sizing: Flex Item Max-Content Contributions</title> |
| <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#intrinsic-item-contributions"> |
| <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#algo-main-item"> |
| <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> |
| <link rel="match" href="flex-container-min-content-001-ref.html"> |
| |
| <style> |
| @import "/fonts/ahem.css"; /* optional */ |
| |
| body { |
| /* Fit it in 800x600 pixels */ |
| display: grid; |
| grid-template-columns: repeat(auto-fill, 66px 66px 66px); |
| grid-auto-rows: 50px; |
| font: 10px/1 Ahem, monospace; |
| } |
| |
| /* impose min-content constraint, block formatting context */ |
| .wrap > * { |
| width: max-content; |
| height: max-content; |
| /* floating inside a large box for UAs that don't understand min-content */ |
| float: left; |
| } |
| .wrap { |
| width: 100px; height: 100px; |
| counter-increment: test; |
| } |
| |
| .row, .col { |
| display: flex; |
| background: blue; |
| } |
| .row { flex-flow: row; } |
| .col { flex-flow: column; } |
| |
| .item { |
| /* ensure _outer_ size is measured */ |
| margin: 5px; |
| padding: 3px; |
| border: 2px solid aqua; |
| color: orange; |
| } |
| |
| |
| /* help people debugging */ |
| .wrap:hover::before { |
| content: counter(test, decimal-leading-zero); |
| position: absolute; |
| font: initial; |
| } |
| </style> |
| |
| <!-- |
| |
| { row | col } x { flexible | no-grow | no-shrink } x { no | small | large } pref size x { harmonious | disjoint larger | disjoint smaller } flex basis } |
| |
| --> |
| |
| <!-- 01 row x flexible x none x harmonious --> |
| <div class="wrap"> |
| <div class="row"> |
| <div class="item" style="flex: auto">X X</div> |
| </div> |
| </div> |
| |
| <!-- 02 row x flexible x small x harmonious --> |
| <div class="wrap"> |
| <div class="row"> |
| <div class="item" style="flex: auto; width: 0.4ch">X X</div> |
| </div> |
| </div> |
| |
| <!-- 03 row x flexible x large x harmonious --> |
| <div class="wrap"> |
| <div class="row"> |
| <div class="item" style="flex: auto; width: 4ch">X X</div> |
| </div> |
| </div> |
| |
| |
| <!-- 04 row x flexible x none x disjoint --> |
| <div class="wrap"> |
| <div class="row"> |
| <div class="item" style="flex: 6ch">X X</div> |
| </div> |
| </div> |
| |
| <!-- 05 row x flexible x small x disjoint --> |
| <div class="wrap"> |
| <div class="row"> |
| <div class="item" style="flex: 6ch; width: 0.4ch">X X</div> |
| </div> |
| </div> |
| |
| <!-- 06 row x flexible x large x disjoint --> |
| <div class="wrap"> |
| <div class="row"> |
| <div class="item" style="flex: 6ch; width: 4ch">X X</div> |
| </div> |
| </div> |
| |
| |
| |
| <!-- 07 row x no-grow x none x harmonious --> |
| <div class="wrap"> |
| <div class="row"> |
| <div class="item" style="flex: 0 1 auto">X X</div> |
| </div> |
| </div> |
| |
| <!-- 08 row x no-grow x small x harmonious --> |
| <div class="wrap"> |
| <div class="row"> |
| <div class="item" style="flex: 0 1 auto; width: 0.4ch">X X</div> |
| </div> |
| </div> |
| |
| <!-- 09 row x no-grow x large x harmonious --> |
| <div class="wrap"> |
| <div class="row"> |
| <div class="item" style="flex: 0 1 auto; width: 4ch">X X</div> |
| </div> |
| </div> |
| |
| |
| <!-- 10 row x no-grow x none x larger --> |
| <div class="wrap"> |
| <div class="row"> |
| <div class="item" style="flex: 0 1 6ch">X X</div> |
| </div> |
| </div> |
| |
| <!-- 11 row x no-grow x small x larger --> |
| <div class="wrap"> |
| <div class="row"> |
| <div class="item" style="flex: 0 1 6ch; width: 0.4ch">X X</div> |
| </div> |
| </div> |
| |
| <!-- 12 row x no-grow x large x larger --> |
| <div class="wrap"> |
| <div class="row"> |
| <div class="item" style="flex: 0 1 6ch; width: 4ch">X X</div> |
| </div> |
| </div> |
| |
| |
| <!-- 13 row x no-grow x none x smaller --> |
| <div class="wrap"> |
| <div class="row"> |
| <div class="item" style="flex: 0 1 0.2ch">X X</div> |
| </div> |
| </div> |
| |
| <!-- 14 row x no-grow x smaller x smaller --> |
| <div class="wrap"> |
| <div class="row"> |
| <div class="item" style="flex: 0 1 0.2ch; width: 0.4ch">X X</div> |
| </div> |
| </div> |
| |
| <!-- 15 row x no-grow x larger x smaller --> |
| <div class="wrap"> |
| <div class="row"> |
| <div class="item" style="flex: 0 1 0.2ch; width: 4ch">X X</div> |
| </div> |
| </div> |
| |
| |
| |
| <!-- 16 row x no-shrink x none x harmonious --> |
| <div class="wrap"> |
| <div class="row"> |
| <div class="item" style="flex: 1 0 auto">X X</div> |
| <!-- see also https://www.w3.org/TR/css-flexbox-1/#algo-main-item case C --> |
| </div> |
| </div> |
| |
| <!-- 17 row x no-shrink x small x harmonious --> |
| <div class="wrap"> |
| <div class="row"> |
| <div class="item" style="flex: 1 0 auto; width: 0.4ch">X X</div> |
| </div> |
| </div> |
| |
| <!-- 18 row x no-shrink x large x harmonious --> |
| <div class="wrap"> |
| <div class="row"> |
| <div class="item" style="flex: 1 0 auto; width: 4ch">X X</div> |
| </div> |
| </div> |
| |
| |
| <!-- 19 row x no-shrink x none x larger --> |
| <div class="wrap"> |
| <div class="row"> |
| <div class="item" style="flex: 1 0 4.5ch">X X</div> |
| </div> |
| </div> |
| |
| <!-- 20 row x no-shrink x small x larger --> |
| <div class="wrap"> |
| <div class="row"> |
| <div class="item" style="flex: 1 0 4.5ch; width: 0.4ch">X X</div> |
| </div> |
| </div> |
| |
| <!-- 21 row x no-shrink x large x larger --> |
| <div class="wrap"> |
| <div class="row"> |
| <div class="item" style="flex: 1 0 4.5ch; width: 4ch">X X</div> |
| </div> |
| </div> |
| |
| |
| <!-- 22 row x no-shrink x none x smaller --> |
| <div class="wrap"> |
| <div class="row"> |
| <div class="item" style="flex: 1 0 0.2ch">X X</div> |
| </div> |
| </div> |
| |
| <!-- 23 row x no-shrink x smaller x smaller --> |
| <div class="wrap"> |
| <div class="row"> |
| <div class="item" style="flex: 1 0 0.2ch; width: 0.4ch">X X</div> |
| </div> |
| </div> |
| |
| <!-- 24 row x no-shrink x larger x smaller --> |
| <div class="wrap"> |
| <div class="row"> |
| <div class="item" style="flex: 1 0 0.2ch; width: 4ch">X X</div> |
| </div> |
| </div> |
| |
| |
| <!-- ###################################################################### --> |
| |
| |
| <!-- 01 col x flexible x none x harmonious --> |
| <div class="wrap" style="counter-reset: test; grid-column: 1"> <!-- new section --> |
| <div class="col"> |
| <div class="item" style="flex: auto">X</div> |
| </div> |
| </div> |
| |
| <!-- 02 col x flexible x small x harmonious --> |
| <div class="wrap"> |
| <div class="col"> |
| <div class="item" style="flex: auto; height: 0.4em">X</div> |
| </div> |
| </div> |
| |
| <!-- 03 col x flexible x large x harmonious --> |
| <div class="wrap"> |
| <div class="col"> |
| <div class="item" style="flex: auto; height: 1.5em">X</div> |
| </div> |
| </div> |
| |
| |
| <!-- 04 col x flexible x none x disjoint --> |
| <div class="wrap"> |
| <div class="col"> |
| <div class="item" style="flex: 2em">X</div> |
| </div> |
| </div> |
| |
| <!-- 05 col x flexible x small x disjoint --> |
| <div class="wrap"> |
| <div class="col"> |
| <div class="item" style="flex: 2em; height: 0.4em">X</div> |
| </div> |
| </div> |
| |
| <!-- 06 col x flexible x large x disjoint --> |
| <div class="wrap"> |
| <div class="col"> |
| <div class="item" style="flex: 2em; height: 1.5em">X</div> |
| </div> |
| </div> |
| |
| |
| |
| <!-- 07 col x no-grow x none x harmonious --> |
| <div class="wrap"> |
| <div class="col"> |
| <div class="item" style="flex: 0 1 auto">X</div> |
| </div> |
| </div> |
| |
| <!-- 08 col x no-grow x small x harmonious --> |
| <div class="wrap"> |
| <div class="col"> |
| <div class="item" style="flex: 0 1 auto; height: 0.4em">X</div> |
| </div> |
| </div> |
| |
| <!-- 09 col x no-grow x large x harmonious --> |
| <div class="wrap"> |
| <div class="col"> |
| <div class="item" style="flex: 0 1 auto; height: 1.5em">X</div> |
| </div> |
| </div> |
| |
| |
| <!-- 10 col x no-grow x none x larger --> |
| <div class="wrap"> |
| <div class="col"> |
| <div class="item" style="flex: 0 1 2em">X</div> |
| </div> |
| </div> |
| |
| <!-- 11 col x no-grow x small x larger --> |
| <div class="wrap"> |
| <div class="col"> |
| <div class="item" style="flex: 0 1 2em; height: 0.4em">X</div> |
| </div> |
| </div> |
| |
| <!-- 12 col x no-grow x large x larger --> |
| <div class="wrap"> |
| <div class="col"> |
| <div class="item" style="flex: 0 1 2em; height: 1.5em">X</div> |
| </div> |
| </div> |
| |
| |
| <!-- 13 col x no-grow x none x smaller --> |
| <div class="wrap"> |
| <div class="col"> |
| <div class="item" style="flex: 0 1 0.2em">X</div> |
| </div> |
| </div> |
| |
| <!-- 14 col x no-grow x smaller x smaller --> |
| <div class="wrap"> |
| <div class="col"> |
| <div class="item" style="flex: 0 1 0.2em; height: 0.4em">X</div> |
| </div> |
| </div> |
| |
| <!-- 15 col x no-grow x larger x smaller --> |
| <div class="wrap"> |
| <div class="col"> |
| <div class="item" style="flex: 0 1 0.2em; height: 1.5em">X</div> |
| </div> |
| </div> |
| |
| |
| |
| |
| |
| <!-- 16 col x no-shrink x none x harmonious --> |
| <div class="wrap"> |
| <div class="col"> |
| <div class="item" style="flex: 1 0 auto">X</div> |
| </div> |
| </div> |
| |
| <!-- 17 col x no-shrink x small x harmonious --> |
| <div class="wrap"> |
| <div class="col"> |
| <div class="item" style="flex: 1 0 auto; height: 0.4em">X</div> |
| </div> |
| </div> |
| |
| <!-- 18 col x no-shrink x large x harmonious --> |
| <div class="wrap"> |
| <div class="col"> |
| <div class="item" style="flex: 1 0 auto; height: 1.5em">X</div> |
| </div> |
| </div> |
| |
| |
| <!-- 19 col x no-shrink x none x larger --> |
| <div class="wrap"> |
| <div class="col"> |
| <div class="item" style="flex: 1 0 0.2em">X</div> |
| </div> |
| </div> |
| |
| <!-- 20 col x no-shrink x small x larger --> |
| <div class="wrap"> |
| <div class="col"> |
| <div class="item" style="flex: 1 0 0.2em; height: 0.4em">X</div> |
| </div> |
| </div> |
| |
| <!-- 21 col x no-shrink x large x larger --> |
| <div class="wrap"> |
| <div class="col"> |
| <div class="item" style="flex: 1 0 0.2em; height: 1.5em">X</div> |
| </div> |
| </div> |
| |
| |
| <!-- 22 col x no-shrink x none x smaller --> |
| <div class="wrap"> |
| <div class="col"> |
| <div class="item" style="flex: 1 0 0.2em">X</div> |
| </div> |
| </div> |
| |
| <!-- 23 col x no-shrink x smaller x smaller --> |
| <div class="wrap"> |
| <div class="col"> |
| <div class="item" style="flex: 1 0 0.2em; height: 0.4em">X</div> |
| </div> |
| </div> |
| |
| <!-- 24 col x no-shrink x larger x smaller --> |
| <div class="wrap"> |
| <div class="col"> |
| <div class="item" style="flex: 1 0 0.2em; height: 1.5em">X</div> |
| </div> |
| </div> |