min-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月.
min-content は大きさのキーワードで、コンテンツの内在的な最小幅を表しています。テキストコンテンツの場合は、コンテンツがすべてのソフトラッピングの機会を使用した場合に、最も長い単語と同じくらい小さくなることを意味します。
構文
css
/* 長さとして使用 */ width: min-content; inline-size: min-content; height: min-content; block-size: min-content; /* グリッドトラックで使用 */ grid-template-columns: 200px 1fr min-content; 例
min-content をボックスの大きさに使用
HTML
html
<div class="item">Item</div> <div class="item">Item with more text in it.</div> CSS
css
.item { width: min-content; background-color: #8ca0ff; padding: 5px; margin-bottom: 1em; } 結果
min-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: min-content min-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-min-content |
ブラウザーの互換性
関連情報
- 関連する大きさのキーワード:
max-content,fit-content