ブラウザウィンドウのサイズを変更すると外側の Div が折りたたまれるのはなぜですか?

外側の

が実行されないのはなぜですか?内側の

を完全に囲みます。サイズ変更時?

内側と外側の

を持つコンテナでは、外側の

内部の

のコンテンツよりも小さな幅に予期せず折りたたまれます。この問題は、ブロック要素の性質に起因する可能性があります。

ブロック要素は通常、親コンテナと同じ幅を占めます。ウィンドウのサイズをより狭い幅に変更すると、外側の

が変更されます。最初は内部の

のコンテンツを収容するために展開されます。ただし、ウィンドウの幅がさらに減少すると、外側の

の幅は内側の

の幅よりも小さくなります。

この問題に対処するには、inline-block と min を組み合わせます。 -width: 100% 使用可能。 inline-block を使用すると、要素がインライン要素とブロック要素の両方として動作できるようになります。 min-width:100% を設定すると、外側の

が 100% になります。その幅が常にコンテンツの幅と少なくとも等しいことを保証します。

更新されたコード

display: inline-block と min-width: 100% を外側の

、内側の

の内容。外側の

を防ぐことができます。ウィンドウのサイズを変更するときに、コンテンツの幅より小さく縮小することを防ぎます。

.demo {
  display: inline-block;
  min-width: 100%;
}

以上がブラウザウィンドウのサイズを変更すると外側の Div が折りたたまれるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。