フレックスボックス内でテキストオーバーフローが発生する

Question

私は、3つのステップとサンプルコードブ​​ロックと簡単な説明で簡単な説明ページを作成しようとしています。 codepen hereに行くと、私が何を話しているのかがわかります（私も以下のコードを再現しました）。

3つのステップがあり、各ステップのHTML/CSS構造は同じです。ただし、内容の一部が異なる場合があります。コードペンを見ると、第1ステップと第3ステップが比較的よく見えることがわかります。しかし何らかの理由でコードブロックが異なる幅に広がってしまいます。

1. これは問題番号1です。 3つのステップすべてでコードブロック（つまり<div class="code">）の長さが同じになるようにするにはどうすればよいですか？

第二の問題は、私がoverflow-x: scrollとwidth: 100%を設定しているにもかかわらず、その親のdivのいくつかの外のステップ2オーバーフローのためのコードブロックということです。理想的には、コードブロック内のコードを左右にスクロールできるようにしながら、コードブロックの幅を他の2つと同じにしたいと考えています。

2. これは2番の問題です。フレックスボックス内のdivは、親の外側でオーバーフローしないように制約すると同時に、直接の親div内でスクロールすることができます。

私の説明が十分であることを望みます。 Flexboxの癖にまだ慣れていないので、これを説明するのは非常に難しいです。 codepenを見てください、私はそれがはるかに明確になると確信しています。

ありがとうございました。私に明確にする必要がある他のものをお知らせください。

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

編集：ここでは、より良い解決策は、私の最初の答え、その後で

.codeからwidth: 100%を削除し、width: calc(100% - 4rem);.step-bodyするにはを参照してくださいフィドルを追加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

提供しているコードを調整して、問題が解決したことをうまく解決しました。ここ

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; 
    } 

は一例です： https://jsfiddle.net/ax0mfc0p/

あなたはここからフレックスボックスにいくつかのより多くの情報を見つけることができます。 https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties