max-content

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年1月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

max-content はサイズ指定キーワードで、コンテンツの内在的な最大サイズを表します。キーワードは、ソフトラップなしでコンテンツを表示させるために必要な最大サイズまで要素を拡大します。テキストコンテンツの場合、これはオーバーフローが発生しても、コンテンツがまったく折り返されないことを意味します。

interpolate-size プロパティと calc-size() 関数を使用して、max-content を始点・終点としたアニメーションを有効にすることができます。

構文

css

/* 長さとして使用 */
width: max-content;
inline-size: max-content;
height: max-content;
block-size: max-content;
/* グリッドトラックで使用 */
grid-template-columns: 200px 1fr max-content;

例

max-content をボックスの大きさに使用

HTML

html

<div id="container">
 <div class="item">Item</div>
 <div class="item">
 Item with more text in it which will overflow the fixed width box.
 </div>
</div>

CSS

css

#container {
 background-color: #8cffa0;
 padding: 10px;
 width: 200px;
}
.item {
 width: max-content;
 background-color: #8ca0ff;
 padding: 5px;
 margin-bottom: 1em;
}

結果

[フレーム]

max-content をグリッド列の大きさに使用

HTML

html

<div id="container">
 <div>Item</div>
 <div>Item with more text in it.</div>
 <div>Flexible item</div>
</div>

CSS

css

#container {
 display: grid;
 grid-template-columns: max-content max-content 1fr;
 grid-gap: 5px;
 box-sizing: border-box;
 height: 200px;
 width: 100%;
 background-color: #8cffa0;
 padding: 10px;
}
#container > div {
 background-color: #8ca0ff;
 padding: 5px;
}