このスニペットを見てください：
table {
background-color: yellow;
box-shadow: inset 0 0 1px red;
max-width: 100%;
/* You would get similarly strange behavior with collapsing borders: */
/* border-collapse: collapse; */
}
td {
background-color: lightgreen;
box-shadow: inset 0 0 1px blue;
max-width: 100%;
}
.flex {
max-width: 100%;
display: flex;
flex: 1;
background-color: lightblue;
box-shadow: inset 0 0 1px black;
flex-wrap: wrap;
}
.box {
width: 50%;
background-color: cyan;
border-radius: 9px;
box-shadow: inset 0 0 1px red;
}<table>
<tr>
<td>
<div class="flex">
<div class="box">
123456789ABCDEFGHIJKL
</div>
<div class="box">
meeedium
</div>
<div class="box">
short
</div>
</div>
</td>
</tr>
</table>左上のテキストがbox完全に収まらないことに注意してください。（少なくともChromeではそうではありません。）ラッピングテーブルは、その内容が完全に収まるように、その幅を「プッシュ」しようとすると想定していました。それで、これは実装のバグですか？または不特定の動作？それとも私のコードは単に欠陥がありますか？
誰かがこの動作を説明し、それを修正するための解決策を提供できますか？
（ちなみに、この質問の初期ソリューションスケッチを試しているときに、この奇妙な動作に遭遇しました。CSSを使用して、「必要なだけ狭い」同じ幅の列を持つ2列のグリッドを作成する方法は？）
編集： 2つの「ビジュアル列」は両方とも同じ幅である必要があります。したがって、たとえばmax-width: 50%;を含むソリューション.boxは、私が探しているものではありません。私の質問は本当にテーブルについてです：すべての内容がそれ自体に適切に収まるように幅を広げないのはなぜですか？
この問題の解決策は、テーブルが「広すぎる」ことのないようにする必要があります。コンテンツがぴったり収まるように、必要なだけの幅にする必要がありますが、1サブピクセル幅ではありません。
まず、アイテムごとにフレックスベースのサイズを決定します。この場合width: 50%、使用可能なサイズに依存するため、複雑です。スペックによると
使用されるフレックスベースが
content使用可能なサイズであるか、それに依存していて、フレックスコンテナが最小コンテンツまたは最大コンテンツの制約の下でサイズ設定されている場合（自動テーブルレイアウト [CSS21]を実行する場合など）、その制約の下でアイテムのサイズを設定します。フレックスベースのサイズは、アイテムの結果であるメインサイズ。
CSSテーブルは両方を使用するため、それがフレックスベースサイズが最小コンテンツまたは最大コンテンツになることを意味するかどうかはわかりません。ただし、ラップの機会がないため、両方とも同じである必要があります。
したがって、フレックスベースのサイズはテキストの幅になります。
次に、
フレックスコンテナが関与するフォーマットコンテキストのルールを使用して、フレックスコンテナのメインサイズを決定します。
次に、テーブルとフレックスコンテナは、テキストの合計と同じ幅になります。
フレックスコンテナの幅が確立されると、フレックスアイテムのパーセンテージを解決できます。ただし、フレックスコンテナ（またはテーブル）の幅には影響しません。
このスニペットでこれをよりよく見ることができます：
.flex {
display: flex;
background-color: lightblue;
box-shadow: inset 0 0 1px black;
flex-wrap: wrap;
}
.box {
width: 50%;
background-color: cyan;
border-radius: 9px;
box-shadow: inset 0 0 1px red;
}<table>
<tr>
<td>
<div class="flex">
<div class="">
123456789ABCDEFGHIJKL
</div>
<div class="">
meeedium
</div>
<div class="">
short
</div>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td>
<div class="flex">
<div class="box">
123456789ABCDEFGHIJKL
</div>
<div class="box">
meeedium
</div>
<div class="box">
short
</div>
</div>
</td>
</tr>
</table>基本的に、必要なのは、すべてのフレックスアイテムを最も幅の広いものと同じ幅にすることです。CSSでそれを行う方法はないと思いますが、JSを使用することはできます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加