Предварительный тег, вызывающий горизонтальную прокрутку страницы в CSS Grid

Я работаю над переводом своего сайта на CSS Grid. Я обнаружил неожиданное поведение.

У меня есть простой заголовок макета CSS-Grid, охватывающий два столбца, в следующей строке есть боковая навигация с фиксированным размером, а основной контент использует оставшееся пространство.

В основном элементе содержится предварительный тег с демо-кодом. Это pre — довольно длинная строка, для некоторых размеров экрана она выталкивает основную область за пределы представления браузера.

Я хочу, чтобы предварительная прокрутка была горизонтальной.

body {
  margin: 40px;
}

pre {
  overflow: auto;
  background-color: #ffffff;
  border: 1px solid #898989;
  padding: 5px;
}

header {
  background: #e1e1e1;
  grid-area: header;
}

aside {
  grid-area: aside;
  background: #d7d7d7;
}

aside nav {
  background: #e1e1e1;
}

aside nav ul {
  list-style: none;
  padding-top: 10px;
}

aside nav ul li {
  margin-bottom: 10px;
}

main {
  background: #c2c2c2;
  grid-area: main;
}

.box {
  border-radius: 5px;
  padding: 20px;
}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-areas: "header header" "aside main";
  grid-template-columns: 200px 1fr;
  grid-template-rows: 110px 1fr;
}
<div class="grid">
  <header class="box">
    <h1>Site Name and Navigation Bar</h1>
  </header>
  <aside class="box">
    <h1>Sidebar</h1>
    <p>This is the sidebar. Might have secondary navigation elements.</p>

    <nav>
      <ul>
        <li><a href="">Link to nowhere</a></li>
        <li><a href="">Link to nowhere</a></li>
      </ul>
    </nav>
  </aside>
  <main class="box">
    <h1>Main Content</h1>
    <p>The following <code>pre</code> element will be too large for our grid. It will not have a horizontal scrollbar if it has lines that exceed its width.</p>
    <h2>Darn Pre</h2>
    <pre><code>&lt;html&gt;
  &lt;body&gt;
    &lt;p&gt;I like long sentences and can not lie. Look at it it's so big. That make your page to be far to wide. I want to get horizontal with the freaky line. My homeboys tried to warn me that pre can make you layout funky. 
    &lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
      </code></pre>
    <main>
</div>

codepen с демонстрацией этой проблемы


html css css-grid pre
person Nicholas Marshall    schedule 02.08.2017    source источник
comment
Простое решение проблемы — добавить min-width: 0 к .box. codepen.io/anon/pen/OjRXmg   -  person Michael Benjamin    schedule 02.08.2017
comment
Спасибо за эту ссылку, вы правы, есть лучшие исправления.   -  person Nicholas Marshall    schedule 02.08.2017

Ответы (1)


arrow_upward
1
arrow_downward

Тег Pre попытается заполнить все доступное пространство. Исправление состоит в том, чтобы ограничить его каким-то образом.

Я исправил это, добавив еще один столбец 1fr и установив основной диапазон.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-areas: "header header header" "aside main main";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 110px 1fr;
}

Пример Codepen, показывающий мое исправление

person Nicholas Marshall    schedule 02.08.2017