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

Question

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

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

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

• Why doesn't flex item shrink past content size?
• Pre code blocks stretch the content beyond screen width in a centered flex container
• 等等...

...我仍然无法根据我的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

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

在嵌套的Flexbox结构中，它还可以影响flex项目作为flex容器（或者祖先是flex项目），在这种情况下，你的content是一个，并且还需要将min-width设置为0。

作为旁注，在这种情况下，当使用min-width: 0而不是pre时，在overflow上设置的visible通常不是必需的，并且可以被移除（我在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>

Answer 2

你是这个意思吗？

* {
  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>