- "html": "<strong>Calculate the used <a class=\"css property\" data-link-type=\"property\" href=\"https://drafts.csswg.org/css-multicol-2/#propdef-column-width\" id=\"ref-for-propdef-column-width\">column-width</a>:</strong>\n \n <ul>\n <li>\n If <a class=\"css property\" data-link-type=\"property\" href=\"https://drafts.csswg.org/css-multicol-2/#propdef-column-count\" id=\"ref-for-propdef-column-count\">column-count</a> and <a class=\"css property\" data-link-type=\"property\" href=\"https://drafts.csswg.org/css-multicol-2/#propdef-column-width\" id=\"ref-for-propdef-column-width①\">column-width</a> are both <a class=\"css\" data-link-type=\"maybe\" href=\"https://drafts.csswg.org/css-multicol-2/#valdef-column-width-auto\" id=\"ref-for-valdef-column-width-auto\">auto</a>,\n use the shrink-to-fit formula\n <code>min(<var>max-content</var>, max(<var>min-content</var>, <var>constraint</var>))</code>,\n where:\n \n <dl>\n <dt><var>min-content</var>\n \n </dt><dd>the <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-sizing-3/#min-content-inline-size\" id=\"ref-for-min-content-inline-size\">min-content inline size</a> of the box\n\n \n </dd><dt><var>max-content</var>\n \n </dt><dd>the <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-sizing-3/#max-content-inline-size\" id=\"ref-for-max-content-inline-size\">max-content inline size</a> of the box\n\n \n </dd><dt><var>constraint</var>\n \n </dt><dd>\n the <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-writing-modes-4/#inline-axis\" id=\"ref-for-inline-axis⑤\">inline-axis</a> size\n that would <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-sizing-3/#stretch-fit\" id=\"ref-for-stretch-fit\">stretch fit</a> into to the smallest of\n \n <ul>\n <li>the <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-sizing-3/#available\" id=\"ref-for-available⑥\">available space</a>:\n the containing block’s size if that is fixed,\n else the size represented by\n the containing block’s inner <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-sizing-3/#max-width\" id=\"ref-for-max-width②\">max size</a> (if that is fixed)\n floored by its inner <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-sizing-3/#min-width\" id=\"ref-for-min-width②\">min size</a> (if that is fixed)\n \n </li><li>the nearest ancestor <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-overflow-3/#scrollport\" id=\"ref-for-scrollport①\">scrollport</a>’s inner size if that is fixed,\n else / capped by its inner <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-sizing-3/#max-width\" id=\"ref-for-max-width③\">max size</a> if that is fixed,\n floored by its inner <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-sizing-3/#min-width\" id=\"ref-for-min-width③\">min size</a> if that is fixed\n \n </li><li>the initial containing block’s size\n \n </li></ul>\n </dd></dl>\n \n </li><li>If <a class=\"css property\" data-link-type=\"property\" href=\"https://drafts.csswg.org/css-multicol-2/#propdef-column-count\" id=\"ref-for-propdef-column-count①\">column-count</a> is not <a class=\"css\" data-link-type=\"maybe\" href=\"https://drafts.csswg.org/css-multicol-2/#valdef-column-count-auto\" id=\"ref-for-valdef-column-count-auto\">auto</a> and <a class=\"css property\" data-link-type=\"property\" href=\"https://drafts.csswg.org/css-multicol-2/#propdef-column-width\" id=\"ref-for-propdef-column-width③\">column-width</a> is <span class=\"css\" id=\"ref-for-valdef-column-count-auto①\">auto</span>,\n calculate the used <span class=\"property\" id=\"ref-for-propdef-column-width④\">column-width</span> with the same formula,\n except replace <var>constraint</var> with\n <var>constraint</var> − (<span class=\"property\" id=\"ref-for-propdef-column-count②\">column-count</span> − 1) × <a class=\"css property\" data-link-type=\"property\" href=\"https://drafts.csswg.org/css-align-3/#propdef-column-gap\" id=\"ref-for-propdef-column-gap\">column-gap</a>.\n\n \n </li><li>If <a class=\"css property\" data-link-type=\"property\" href=\"https://drafts.csswg.org/css-multicol-2/#propdef-column-count\" id=\"ref-for-propdef-column-count③\">column-count</a> and <a class=\"css property\" data-link-type=\"property\" href=\"https://drafts.csswg.org/css-multicol-2/#propdef-column-width\" id=\"ref-for-propdef-column-width⑤\">column-width</a> are both non-<a class=\"css\" data-link-type=\"maybe\" href=\"https://drafts.csswg.org/css-multicol-2/#valdef-column-count-auto\" id=\"ref-for-valdef-column-count-auto②\">auto</a>,\n the used <span class=\"property\" id=\"ref-for-propdef-column-width⑥\">column-width</span> is the computed <span class=\"property\" id=\"ref-for-propdef-column-width⑦\">column-width</span>.\n (This is not recommended as it can cause overflow;\n instead it is better to set the <span class=\"property\" id=\"ref-for-propdef-column-width⑧\">column-width</span> and a max-block-size.)\n \n </li></ul>"
0 commit comments