HTML <pre><code> タグをラップせずにオーバーフローしようとすると、フレックススペースが壊れる

Question

GitHub などで見られるようなスタイル付きのコード ブロックを作成するために、CSS を pre code セレクターに適用します。レイアウトに Flexbox を使用しており、「ボックス」 div 内に 2 つの「パネル」 div を並べて配置しており、そのうちの 1 つにはコード ブロックがあります (これは <pre><code> 内のコードにすぎません)。 タグ) であり、「ボックス」 div はメインの「コンテナ」 div 内にあります。

私が持っている基本的なCSSは...

リーリー

flex: 0.5 であるため、両方のパネルの幅は同じである必要がありますが、ブロックがパネルに合わせて縮小するのではなく、右側のパネルがブロックに合わせて拡張します。

pre code で white-space: pre-wrap を設定すると、望ましいレイアウト動作が得られますが、当然ながらコードは折り返されます。これは望ましくないことです。 もちろん、

white-space: pre を使用し、専用の幅を pre コード に追加すると、コード ブロックに水平スクロールバーが表示される望ましい動作が得られます。ブロックを内部にパネルを収める必要があるため、専用の幅を使用することはできません。

何らかの理由で、

プレコード で width: 100% を設定してもまったく効果がありません。

このエラーの原因となる他の作業をどこかで行っていないことを確認するために、問題を確認するために次のコードをまとめました (コンテナーを見えるようにするために背景色と余白を追加しました):

https://codepen.io/evprkr/pen/poKQXJr

Answer 1

CSS の問題問題が発生している原因:

1. CSS .*, *:before, *:after { } の最初の行に、見落としがちな最初の . (ドット) があります。したがって、border-box モデルは、:before および :after 擬似要素でのみ機能します。どうやら、margin と padding にも同じことが当てはまります。
2. すべての .panel 先祖には width 値セットがないため、flexbox は子要素を制約できず、無限に大きくなります。
3. flex: 0.5 (デフォルトは flex: 0.5 1 0%) は、幅 flex-basis:50% がないため、明らかに効果がありません。どちらの場合も、pre code はオーバーフローをトリガーしないため、スクロール可能なボックスは表示されません。理由は説明できませんが、おそらく W3C の仕様によるものでしょう。ただし、.panel width: 50% の宣言により、最終的に問題は解決されました。
4. margins をさまざまな要素および gap と組み合わせて使用​​すると、ブラウザ/コードペンのサイズを変更するときに、要素の予期せぬ重なりが生じる可能性があります。上記先頭の.
を削除しても

＃＃＃＃＃＃解決＃＃＃＃＃＃

広告 1) .

(クリック)

を削除します。
• ad 2) .container width: 100% を指定して、
flexbox
• に使用可能な制約を提供します。 ad 3) .panel flex: 0.5 を削除し、
.panel width: calc(50% - 0.5rem)
• を指定します。 gap は .panel の合計幅を増やし、サイズ変更時に重複する可能性があるため、calc(..) が必要です。 ngap: 1rem は 2 つの列のそれぞれに 0.5rem を追加するため、各列の width からその値を減算する必要があります。 4) ngap と同様、margin
は要素の全体の幅を増やすため、他の要素と重ならないように要素の幅から左マージンまたは右マージン、あるいはその両方を減算する必要があります。 CSS に余分な calc(..) を追加しないようにする最も簡単な方法は、要素の margin をその直接の親の padding に移動することです。すべてのケースに当てはまるわけではありませんが、この場合は全体のレイアウトを変更しなくてもうまく機能します。 ＃＃＃＃＃＃ボーナス＃＃＃＃＃＃ 応答動作:

.box

がその子要素をラップできるようにします

必要最小限の .panel 幅

を設定して、

.box
• がその子 .panel を強制的にラップします。この場合は
300px
• を選択しました。 これは、ラップを解除したときに .panel 要素を完全な 50% まで拡張できるようにするために必要です。
また
• ハイフン読みやすくするためにテキストを編集します... ＃＃＃＃＃＃断片＃＃＃＃＃＃
リーリー ああああ