水平滚动一个 <pre> 标签，它是一个自动弹性项目（或一个）

Question

我好像想不通。看了之后（最少）

等...

...根据我的 flexbox 布局，我仍然无法让我的 <pre> 标签内容水平滚动到可用视口的宽度 space。

这是我当前设置的 CodePen：https://codepen.io/neezer/pen/BJjzzM

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
}

.outer {
  display: flex;
  padding: 20px;
  background-color: #aaa;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.nav {
  flex: 0 0 200px;
  background-color: blue;
  color: white;
  padding: 20px;
}

.content {
  flex: 1;
  margin-left: 20px;
  background-color: green;
  display: flex;
  flex-direction: column;
}

.header {
  flex: 0 auto;
  background-color: purple;
  padding: 20px;
  margin-bottom: 20px;
}

.header h1 {
  margin: 0;
}

.pre {
  flex: 1;
  background-color: red;
  margin: 0;
  overflow: auto;
  min-width: 0;
}

<div class='outer'>
  <div class='nav'>
    sidebar
  </div>
  <div class='content'>
    <div class='header'>
      <h1>Horizontal problems</h1>
    </div>
    <pre class='pre'>
      <span>this is a really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, long piece of text
      </span>
      <span>this is a really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, long piece of text
      </span>
      <span>this is a really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, long piece of text
      </span>
      <span>this is a really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, long piece of text
      </span>
    </pre>
  </div>
</div>

我做错了什么？

Answer 1

这是你的意思吗？

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
}

.outer {
  display: flex;
  padding: 20px;
  background-color: #aaa;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.nav {
  flex: 0 0 200px;
  background-color: blue;
  color: white;
  padding: 20px;
}

.content {
  flex: 1;
  margin-left: 20px;
  background-color: green;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header {
  flex: 0 auto;
  background-color: purple;
  padding: 20px;
  margin-bottom: 20px;
}

.header h1 {
  margin: 0;
}

.pre {
  flex: 1;
  background-color: red;
  margin: 0;
  overflow: auto;
  min-width: 0;
}

<div class='outer'>
  <div class='nav'>
    sidebar
  </div>
  <div class='content'>
    <div class='header'>
      <h1>Horizontal problems</h1>
    </div>
    <pre class='pre'>
      <span>this is a really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, long piece of text
      </span>
      <span>this is a really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, long piece of text
      </span>
      <span>this is a really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, long piece of text
      </span>
      <span>this is a really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, long piece of text
      </span>
      <span>this is a really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, long piece of text
      </span>
      <span>this is a really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, long piece of text
      </span>
      <span>this is a really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, long piece of text
      </span>
      <span>this is a really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, long piece of text
      </span>
      <span>this is a really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, long piece of text
      </span>
      <span>this is a really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, long piece of text
      </span>
      <span>this is a really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, long piece of text
      </span>
    </pre>
  </div>
</div>

Answer 2

您仍然遇到弹性项目的最小尺寸问题。

在嵌套的 Flexbox 结构中，它还会影响 flex item 成为 flex 容器（或者 ancestor 成为 flex item），在这种情况下你的 content 是一个，还需要将其 min-width 设置为 0。

作为旁注，在这种情况下，当使用 overflow 和 [=18 以外的值时，通常不需要在 pre 上设置 min-width: 0 =]，并且可以删除（我在 Codepen 中所做的）。

Updated codepen

堆栈片段

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
}

.outer {
  display: flex;
  padding: 20px;
  background-color: #aaa;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.nav {
  flex: 0 0 200px;
  background-color: blue;
  color: white;
  padding: 20px;
}

.content {
  flex: 1;
  min-width: 0;                       /*  added  */
  margin-left: 20px;
  background-color: green;
  display: flex;
  flex-direction: column;
}

.header {
  flex: 0 auto;
  background-color: purple;
  padding: 20px;
  margin-bottom: 20px;
}

.header h1 {
  margin: 0;
}

.pre {
  flex: 1;
  background-color: red;
  margin: 0;
  overflow: auto;
  min-width: 0;
}

<div class='outer'>
  <div class='nav'>
    sidebar
  </div>
  <div class='content'>
    <div class='header'>
      <h1>Horizontal problems</h1>
    </div>
    <pre class='pre'>
      <span>this is a really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, long piece of text
      </span>
      <span>this is a really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, long piece of text
      </span>
      <span>this is a really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, long piece of text
      </span>
      <span>this is a really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, long piece of text
      </span>
    </pre>
  </div>
</div>

水平滚动一个 <pre> 标签，它是一个自动弹性项目（或一个）

Horizontally scrolling a <pre> tag that is an auto flex-item (or in one)

css

scroll

pre

flexbox