Горизонтальная прокрутка тега ‹pre›, который является автоматически гибким элементом (или одним)

Я не могу понять это. После просмотра (как минимум)

... Я до сих пор не могу заставить содержимое моего тега <pre> прокручиваться по горизонтали до ширины моего доступного пространства просмотра на основе моего макета 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>

Что я здесь делаю неправильно?


scroll css flexbox pre
person neezer    schedule 18.12.2017    source источник
comment
@LGSon Конечно, или я мог бы просто удалить вопрос. В любом случае, я рад, что у меня есть решение.   -  person neezer    schedule 18.12.2017
comment
Вопросы отличные, так что давайте оставим это :)   -  person Ason    schedule 18.12.2017

Ответы (2)


arrow_upward
0
arrow_downward

Вы по-прежнему страдаете от проблемы минимального размера гибких элементов.

Во вложенной структуре Flexbox это также может повлиять на то, что flex-элемент является flex-контейнером (или предок является flex-элементом), и в этом случае ваш content является одним, и также должен быть установлен его min-width до 0.

Кроме того, в этом случае установка min-width: 0 на pre обычно не требуется при использовании overflow со значением, отличным от visible, и может быть удалена (что я и сделал в 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>

person Ason    schedule 18.12.2017

arrow_upward
0
arrow_downward

Это то, что вы имеете в виду?

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

person Jim-miraidev    schedule 18.12.2017