height:autoが可変しない

Question

CSS素人です
自分なりの分かる書き方で書いてます（古くてすみません）
下記コードですが、赤色の部分が文章の終わりまで続きません
どのようにしたら続くことができますでしょうか
お手上げ状態です。。。

<div style="width:auto;min-height:125px;background:red">

<div style="width:100%;height:25px;min-height:25px">
<div style="width:10%;height:25px;min-height:25px;float:left"></div>
<div style="width:80%;height:25px;;min-height:25px;float:left"></div>
<div style="width:10%;height:25px;;min-height:25px;float:left"></div>
</div>

<div style="width:20%;min-height:100px;height:auto;float:left"></div>
<div style="width:80%;min-height:100px;height:auto;float:left">文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</div></div>

Comments

[Lhankor_Mhy]

削除リクエストをお願いします。

https://teratail.com/help#:~:text=%E8%AA%A4%E3%81%A3%E3%81%A6%E5%90%8C%E3%81%97%E3%82%99%E8%B3%AA%E5%95%8F%E3%82%92%E8%A4%87%E6%95%B0%E6%8A%95%E7%A8%BF%E3%81%97%E3%81%A6%E3%81%97%E3%81%BE%E3%81%A3%E3%81%9F%E5%A0%B4%E5%90%88

Answer 1

私もFlexBoxを使うべき案件だと思いますが、
ご参考までに、どうしてもfloatでということなら、親要素にdisplay:flow-root;を追加するという方法もあります。

<div style="width:auto;min-height:125px;background:red;display:flow-root;">
以下略

<display-inside> - CSS: カスケーディングスタイルシート | MDN

Answer 2

中の要素にfloatプロパティを使用しているからです。
このプロパティは、公式からも、もう非推奨となっています。
（↑Visual Studio Codeの、CSS Linterにて、非推奨警告表示がされていたため、記憶違いでした。
公式ではありませんでした。）
flexBoxを使用することをお勧めします。

<div style="width: auto; min-height: 125px; background: red; display: flex; flex-wrap: wrap;">

  <div style="width: 100%; height:25px; min-height: 25px; display: flex; flex-shrink: 0;">
    <div style="width: 10%; height: 25px; min-height: 25px; flex-shrink: 0;"></div>
    <div style="width: 80%; height: 25px; min-height: 25px; flex-shrink: 0;"></div>
    <div style="width: 10%; height: 25px; min-height: 25px; flex-shrink: 0;"></div>
  </div>

  <div style="width: 20%; min-height: 100px; height: auto; flex-shrink: 0;"></div>
  <div style="width: 80%; min-height: 100px; height: auto; flex-shrink: 0;">文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</div>
</div>

Comments

[Lhankor_Mhy]

横からすみません。
「公式からも、もう非推奨となっています」とのことですが、こちらのソースを教えていただけますか？

[miyabi_pudding]

毎度すみません、、、
調べます・・・。

[miyabi_pudding]

ご指摘ありがとうございます。
CSSのLinterで、非推奨表示がされていたので、公式と勘違いしていたようです。
はやとちりだった・・・。

[Lhankor_Mhy]

ご確認ありがとうございます。
たしか VSCode の CSSLint にそういうオプションがありましたね。

[ppppppp]

回答ありがとうござます
中の要素にfloatプロパティを使用しているからです。
これはなぜでしょうか？
非推奨だから、という理由だと、納得しましたが、そうでないのであれば、別の理由になるのでしょうか？

[miyabi_pudding]

Lhankor_Mhyさん >
そうなんです。VSCodeで、引っかかっていたので、すっかり、思い込んでました　汗

pppppppさん >
扱いが非常に難しいからです。
floatは今回のようなことが起きるため、
単純に左右に分けるのであれば、flexBoxのほうが遥かに扱いやすいし、
少ない記述でいけるからです。
（floatでもやれるが、記述に工夫が必要になる）

[hatena19]

https://developer.mozilla.org/ja/docs/Web/CSS/float
float は上記の説明やサンプルにあるように、本来はテキストなどの回り込みを設定するためのもので、横並びなどのレイアウト用のプロパティではありません。
かつては要素を横並びにする方法が他になかったので、float を使って横並びにするというテクニックが多用されましたが、本来の使い方と異なるためにいろいろ面倒なことが多くなります。
FlexBoxやGridなどレイアウト専用のプロパティがある現在では、本来の目的(テキストなどの回り込み)以外に使用する必然性はないと思います。

[miyabi_pudding]

hatena19さん、本当にありがとうございます。
そうか、CSS Linterでも、本来の使い方と違う（基本的にdisplay: block;の要素に対して）使用方法のために、警告がでてるってことですね・・・。