Ich kämpfe mit Text, der aus einer Flexbox überläuft

Question

Ich versuche eine einfache Erklärungsseite mit 3 Schritten zusammen mit Beispielcodeblöcken und einer kurzen Beschreibung zu erstellen. Wenn Sie zum codepen here gehen, werden Sie sehen, worüber ich spreche (ich habe auch den Code unten reproduziert).

Es gibt 3 Schritte, und die HTML/CSS-Struktur jedes Schritts ist identisch. Einige seiner Inhalte können jedoch variieren. Wenn Sie sich den Code-Stift ansehen, werden Sie sehen, dass die ersten und dritten Schritte relativ gut aussehen. Aber der Codeblock erstreckt sich aus irgendeinem Grund auf verschiedene Breiten.

1. Dies ist das Problem Nummer eins. Wie bekomme ich es so, dass die Codeblöcke (d. H. <div class="code">) für alle drei Schritte die gleiche Länge haben?

Das zweite Problem ist, dass der Code-Block für Schritt 2 überläuft außerhalb mehrerer seiner Mutter div obwohl ich overflow-x: scroll und width: 100% gesetzt haben. Im Idealfall möchte ich, dass der Codeblock die gleiche Breite wie die anderen beiden hat, während der Code darin nach links und rechts verschoben werden kann.

2. Dies ist das Problem Nummer zwei. Wie schränkt man ein div in einer Flexbox so ein, dass es außerhalb seiner Eltern nicht überläuft und gleichzeitig Scrollen innerhalb seines unmittelbaren Elternteils erlaubt?

Ich hoffe, meine Erklärung ist ausreichend. Es ist sehr schwer für mich, dies zu beschreiben, da ich die Eigenheiten von Flexbox noch nicht so gut kenne. Bitte schauen Sie sich den Codepen an, ich bin mir sicher, dass es viel klarer wird.

Vielen Dank im Voraus und bitte lassen Sie mich wissen, was ich sonst noch klären muss.

HTML:

<div class="container"> 
    <div class="step"> 
    <div class="number">1</div> 
    <div class="step-body"> 
     <div class="description">This is a description of the terminal code block below:</div> 
     <div class="code"><pre>npm install foo bar</pre></div> 
    </div> 
    </div> 
    <div class="step"> 
    <div class="number">2</div> 
    <div class="step-body"> 
     <div class="description">This is a description of the very very very long single-line code block below:</div> 
     <div class="code"><pre>foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar</pre></div> 
    </div> 
    </div> 
    <div class="step"> 
    <div class="number">3</div> 
    <div class="step-body"> 
     <div class="description">This is a description of the JSON code block below:</div> 
     <div class="code"><pre>{ 
    "custom": { 
    "key": "a1b2c3d4e5f6" 
    } 
}</pre></div> 
    </div> 
    </div> 
</div> 

CSS:

body { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
} 

.container { 
    max-width: 50%; 
} 

.step { 
    display: flex; 
    border: 1px solid red; 
} 

.number { 
    font-size: 2.5rem; 
    text-align: right; 
    flex-shrink: 0; 
    margin-right: 1rem; 
    width: 3rem; 
} 

.step-body { 
    padding-top: 1rem; 
    padding-bottom: 1rem; 
} 

.code { 
    background-color: black; 
    color: white; 
    width: 100%; 
    padding: 12px; 
    overflow-x: scroll; 
} 

Answer 1

Edit: Hier ist eine bessere Lösung dann meine erste Antwort

entfernen width: 100% von .code und fügen width: calc(100% - 4rem);-.step-body sehen Geige https://jsfiddle.net/0kqx79g9/9/

body { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
} 

.container { 
    max-width: 50%; 
} 

.step { 
    display: flex; 
    border: 1px solid red; 
} 

.number { 
    font-size: 2.5rem; 
    text-align: right; 
    flex-shrink: 0; 
    margin-right: 1rem; 
    width: 3rem; 
} 

.step-body { 
    width: calc(100% - 4rem); 
    padding-top: 1rem; 
    padding-bottom: 1rem; 
} 

.code { 
    background-color: black; 
    color: white; 
    padding: 12px; 
    overflow-x: scroll; 
} 

Answer 2

Ich habe den von Ihnen bereitgestellten Code angepasst, um die Probleme, die Sie haben, hoffentlich zu beheben.

body { 
     display: flex; 
     justify-content: center; 
     align-items: center; 
     width: 100%; 
     height: 100%; 
     position: absolute; 
    } 

    .container { 
     max-width: 50%; 
     -webkit-flex-direction: column; 
     flex-direction: column; 
    } 

    .step { 
     border: 1px solid red; 
     -webkit-flex-direction: column; 
     flex-direction: column; 
     padding:5%; 
    } 

    .number { 
     font-size: 2.5rem; 
     text-align: right; 
     flex-shrink: 0; 
     margin-right: 1rem; 
     width: 3rem; 
    } 

    .step-body { 
     width:inherit; 
     padding-top: 1rem; 
     padding-bottom: 1rem; 
    } 

    .code { 
     background-color: black; 
     color: white; 
     width: 100%; 
     /* padding: 12px; */ 
     overflow-x: scroll; 
    } 

hier ist das Beispiel: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties