Das Ausgabefenster mit Überlauf verhält sich bei Rückenwind-CSS nicht wie erwartet ⇐ CSS

[Guest]

Ich habe dieses erste Design mit meiner Raw-Ausgabe erhalten, das so aussieht:


Es nimmt genau wie beabsichtigt die gesamte Breite ein. Das Problem besteht darin, dass, wenn es Inhalte enthält und diese zu lang sind, das Design kaputt geht und zu lang wird:
[img]https:/ /i.sstatic.net/XIhC3qFc.png[/img]

Wie Sie sehen können, ist die Breite zu lang und zerstört das Design. Der Überlauf der Rohausgabe zerstört das Design. Das ist mein Code:
ScrapePage.tsx

Code: Select all

[b]Raw Output[/b]




[b]Extract[/b]

RawOutput.tsx

Code: Select all

const RawOutput = ({ input }: Props) => {
return (

{input || 'No input provided'}


)
}

Wenn ich overflow-auto auf das übergeordnete Div anwende, wird das Design in Bezug auf die Höhe nicht beeinträchtigt:

Aber in der Breite ist das Design kaputt:
< img alt="Bild des Containers mit gebrochenem Design unter Verwendung der Breite" src="https://i.sstatic.net/WSlDNGwX.png" />
Grundsätzlich ist mein Ziel nur, dass die Breite der Raw-Ausgabe mit der Bildschirmgröße festgelegt wird und wird Habe nur eine Schriftrolle, wenn sie zu lang ist. Ein perfektes Beispiel dafür ist das Design wie hier im Stackoverflow, wenn der gemeinsam genutzte Code zu lang ist:
[img]https://i.sstatic.net /HTRQJzOy.png[/img]