max-content
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
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; } 結果
仕様書
| Specification |
|---|
| CSS Box Sizing Module Level 3 # valdef-width-max-content |
ブラウザーの互換性
関連情報
- 関連する大きさのキーワード:
min-content,fit-content - CSS ボックスサイズモジュール