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/max-content/index.md | 118 ++++++++++++++++++++++++++++++++++
 1 file changed, 118 insertions(+)
 create mode 100644 files/ja/web/css/max-content/index.md

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

diff --git a/files/ja/web/css/max-content/index.md b/files/ja/web/css/max-content/index.md
new file mode 100644
index 0000000000..76373aef2e
--- /dev/null
+++ b/files/ja/web/css/max-content/index.md
@@ -0,0 +1,118 @@
+---
+title: max-content
+slug: Web/CSS/max-content
+tags:
+  - CSS
+  - CSS グリッド
+  - リファレンス
+  - max-content
+  - 大きさ
+browser-compat: css.properties.width.max-content
+translation_of: Web/CSS/max-content
+---
+`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: inherit;
+max-content: initial;
+max-content: revert;
+max-content: unset;
+```
+
+## 例
+
+<h3 id="Using_max-content_for_box_sizing">max-content をボックスの大きさに使用</h3>
+
+#### 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;
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Using_max-content_for_box_sizing", "100%", 200)}}
+
+<h3 id="Sizing_grid_columns_with_max-content">max-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: 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;
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Sizing_grid_columns_with_max-content", "100%", 200)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+### width (および他の大きさのプロパティ) での対応
+
+{{Compat}}
+
+## 関連情報
+
+- 関連する大きさのキーワード: {{cssxref("min-content")}}, {{cssxref("fit-content")}}
-- 
cgit v1.2.3-54-g00ecf