PrismJs не переполняются с помощью CSS Grid - PullRequest
Новая
       33

PrismJs не переполняются с помощью CSS Grid

2 голосов
/ 18 апреля 2019

У меня есть макет страницы с эластичным содержимым div и столбцом фиксированной ширины справа. Для этого у меня есть следующая базовая структура: 

<div class="grid">
  <div class="content">
    Content here
  </div>
  <div class="column">
    Fixed right column
  </div>
</div>

И CSS: 

.grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto 280px;
    width: 500px;
}

.content {
  background: tomato;
}

.column {
  background: deepskyblue;
}

Я ожидал, что содержимое auto заполнит все пространство минус фиксированная ширина столбца. Это действительно происходит, за исключением случаев, когда содержимое div, являющегося тегом призмы, переполняет эту ширину. Вместо того, чтобы генерировать горизонтальную полосу прокрутки в div PrismJs, он просто переполняет div содержимого и толкает столбец дальше вправо.

Есть идеи, как сделать так, чтобы полоса прокрутки появлялась в div вместо нажатия на колонку?

Обратите внимание, что если я установлю фиксированное значение для ширины содержимого, оно будет работать как положено.

Вот пример: 

.grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto 280px;
    width: 500px;
}

.content {
  background: tomato;
}

.column {
  background: deepskyblue;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/prism/1.2.0/themes/prism.css">
    <link href="https://cdn.jsdelivr.net/prism/1.2.0/themes/prism-coy.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/prism/1.2.0/prism.js"></script>


<div class="grid">
  <div class="content">
    <pre><code class="language-javascript">@Component({
        selector: "main",
        directives: [],
        template: `
            &lt;button
                (tap) = "onTapMe()"
                text = "tap me" /&gt;
        `
    })
    class MainPage {
        onTapMe() {
            alert("Hello from Angular 2");
        }
        // long coment pushing the right column further right !!!
    }

Вот рабочая скрипка для игры: https://jsfiddle.net/4crm25pq/1/

1 Ответ

0 голосов
/ 18 апреля 2019

По умолчанию элементы сетки имеют min-width: auto и min-height: auto (точно так же, как flex items ). Таким образом, вы можете установить min-width: 0 и добавить oveflow: auto к fix this - см. Демонстрацию ниже: 

.grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto 280px;
    width: 500px;
}

.content {
  background: tomato;
  min-width: 0; /* added */
  overflow: auto; /* added */
}

.column {
  background: deepskyblue;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/prism/1.2.0/themes/prism.css">
    <link href="https://cdn.jsdelivr.net/prism/1.2.0/themes/prism-coy.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/prism/1.2.0/prism.js"></script>


<div class="grid">
  <div class="content">
    <pre><code class="language-javascript">@Component({
        selector: "main",
        directives: [],
        template: `
            &lt;button
                (tap) = "onTapMe()"
                text = "tap me" /&gt;
        `
    })
    class MainPage {
        onTapMe() {
            alert("Hello from Angular 2");
        }
        // long coment pushing the right column further right !!!
    }

Ниже приведены некоторые примеры такого поведения:

...