From b878d4a1cf8abdbaef200f64391ed6af2d80c2a6 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 16 Nov 2021 10:16:30 +0900
Subject: CSS Box Sizing 関連のリファレンスを更新
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 2021/11/14 時点の英語版に同期
---
 files/ja/web/css/min-content/index.md | 106 ++++++++++++++++++++++++++++++++++
 1 file changed, 106 insertions(+)
 create mode 100644 files/ja/web/css/min-content/index.md

(limited to 'files/ja/web/css/min-content')

diff --git a/files/ja/web/css/min-content/index.md b/files/ja/web/css/min-content/index.md
new file mode 100644
index 0000000000..93043dd853
--- /dev/null
+++ b/files/ja/web/css/min-content/index.md
@@ -0,0 +1,106 @@
+---
+title: min-content
+slug: Web/CSS/min-content
+tags:
+  - CSS
+  - キーワード
+  - リファレンス
+  - min-content
+  - 大きさ
+browser-compat: css.properties.width.min-content
+translation_of: min-content
+---
+`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: inherit;
+min-content: initial;
+min-content: revert;
+min-content: unset;
+```
+
+## 例
+
+<h3 id="Using_min-content_for_box_sizing">min-content をボックスの大きさに使用</h3>
+
+#### 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;
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Using_min-content_for_box_sizing", "100%", 200)}}
+
+<h3 id="Sizing_grid_columns_with_min-content">min-content をグリッド列の大きさに使用</h3>
+
+#### HTML
+
+```html
+<div id="container">
+  Item
+  <div>
+    Item with more text in it.
+  </div>
+  Flexible item
+</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;
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Sizing_grid_columns_with_min-content", "100%", 200)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+### width (および他の大きさのプロパティ) での対応
+
+{{Compat}}
-- 
cgit v1.2.3-54-g00ecf