Question

我正在尝试制作一个简单的解释页面，其中包含3个步骤以及示例代码块和简短描述。如果你去编码器here，你会看到我在说什么（我也复制了下面的代码）。

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

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

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

这是第二个问题。如何约束Flexbox中的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

编辑：这是一个比我的第一个答案更好的解决方案

从width: 100%移除.code并将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/

您可以在此处找到有关flex-box的更多信息： https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

在flexbox

2 个答案: