Struggling with text overflowing from within a flexbox - html

Question

I'm trying to make a simple explanation page with 3 steps along with example code blocks and a short description. If you go to the codepen here, you will see what I am talking about (I have also reproduced the code below).
There are 3 steps, and the HTML/CSS structure of each step is identical. However, some of its contents may vary. If you look at the code pen, you'll see that the first and third steps look relatively okay. But the code block extends to different widths for some reason.
This is problem number one. How do I get it such that the code blocks (i.e. <div class="code">) are equal length for all three of the steps?
The second issue is that the code block for step 2 overflows outside of several of its parent div even though I have set overflow-x: scroll and width: 100%. Ideally, I would want the code block to be the same width as the other two, while allowing the code inside to be scrollable left and right.
This is problem number two. How do you constrain a div inside a flexbox such that it does not overflow outside of its parents and at the same time can allow scrolling within its immediate parent div?
I hope my explanation is sufficient. It's very hard for me to describe this as I am not too familiar with the quirks of Flexbox just yet. Please have a look at the codepen, I am certain it will become a lot clearer.
Thanks in advance and please let me know what else I may need to clarify.
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: here is a better solution then my first answer
Remove width: 100% from .code and add width: calc(100% - 4rem); to .step-body see fiddle 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

I've adjusted the code you've provided to hopefully solve the issues you're having.
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;
}
here is the example:
https://jsfiddle.net/ax0mfc0p/
you can find some more information on flex-box from here:
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties