水平滚动atag that is an auto flex-item (or in one) [duplicate]

Question

这个问题在这里已有答案：

Why don't flex items shrink past content size? 1回答

我似乎无法弄清楚这一点。看完后（至少）

...我仍然无法根据我的flexbox布局将我的<pre>标记内容水平滚动到可用视口空间的宽度。

这是我目前设置的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

另一答案