水平滚动作为自动弹性项目（或一个）的 <pre> 标记[重复]

【问题标题】：Horizontally scrolling a <pre> tag that is an auto flex-item (or in one) [duplicate]水平滚动作为自动弹性项目（或一个）的 <pre> 标记[重复]
【发布时间】：2017-12-18 22:57:58
【问题描述】：

我似乎无法弄清楚这一点。看了之后（最少）

...我仍然无法让我的 &lt;pre&gt; 标记内容水平滚动到基于我的 flexbox 布局的可用视口空间的宽度。

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

我在这里做错了什么？

【问题讨论】：

  • @LGSon 当然，或者我可以删除这个问题。不管怎样，我很高兴我有一个解决方案。
  • 问题很好，所以让我们继续吧:)

标签： css scroll flexbox pre


【解决方案1】：

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

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

附带说明一下，在这种情况下，在 pre 上设置的 min-width: 0 通常在使用具有除 visible 以外的值的 overflow 时不是必需的，并且可以删除（我在Codepen）。

Updated codepen

堆栈sn-p

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

【讨论】：

    【解决方案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>

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-05-07
      • 2021-09-28
      • 2018-01-10
      • 1970-01-01
      • 2010-09-26
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode