挣扎于 flexbox 中溢出的文本

Question

我正在尝试制作一个包含 3 个步骤的简单说明页面以及示例代码块和简短说明。如果你去代码笔here，你会看到我在说什么（我也转载了下面的代码）。

一共有3个步骤，每个步骤的HTML/CSS结构都是一样的。但是，其某些内容可能会有所不同。如果你看代码笔，你会发现第一步和第三步看起来还可以。但是由于某些原因，代码块扩展到不同的宽度。

这是第一个问题。我如何才能使所有三个步骤的代码块（即 <div class="code">）长度相等？

第二个问题是步骤 2 的代码块溢出了它的几个父 div，即使我已经设置了 overflow-x: scroll 和 width: 100%。理想情况下，我希望代码块与其他两个宽度相同，同时允许内部代码左右滚动。

这是第二个问题。如何将 div 限制在 flexbox 中，使其不会溢出到其父项之外，同时允许在其直接父项 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 参见 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

我已经调整了您提供的代码，希望能解决您遇到的问题。

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/

您可以从这里找到更多关于 flex-box 的信息： https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

挣扎于 flexbox 中溢出的文本

Struggling with text overflowing from within a flexbox

html

css

frontend

flexbox