Flexbox совместимость с горизонтальной предварительной/кодовой прокруткой

Ответ 1

простой

.container { width:100%; }

изменяет размер веб-сайта правильно. Но тогда Chrome не позволяет вам использовать полосу прокрутки. Это вызвано тем, что оно переполняет размер всех его контейнеров (кроме BODY). Следовательно, мы должны сказать браузеру правильно распознать pre node:

.container {
  max-width: 100%;
}
pre {
  position: relative;
}

Это говорит Chrome о необходимости корректно обрабатывать события мыши и исправляет макет

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

PS: протестировано в текущем Chrome и Firefox http://jsfiddle.net/nturor46/32/

Ответ 2

Что здесь происходит, это наиболее определенно ошибка в Chrome.

Поиграв со своим скриптом и посмотрев на него с другими браузерами, я могу заключить, что это проблема, специфичная для Chrome. И любопытный.

По какой-то причине <div class="col-md-12 docs"> растет до размера, который должен иметь (высота p и pre вместе), но не учитывает горизонтальную полосу прокрутки внутри тега pre.

Вот изображение, чтобы продемонстрировать проблему. Часть с красным фоном - это контейнер.

Так как pre имеет границу шириной 1px внизу, результат оставляет пробел в 1px, чтобы вы действительно использовали полосу прокрутки. Вы можете попробовать сами. Просто попробуйте захватить самую верхнюю 1px-линию полосы прокрутки.

Удаление свойств flex устраняет вашу проблему, но мы не согласны с этим.

Теперь я бы подумал, что добавление простыни 0.1px к нижней части родителя устранит проблему, но это не так. Затем я попытался обернуть тег pre в div классом chromefix, а затем добавил следующий CSS

.chromefix{
  overflow: hidden;
}

Но это создало еще более странную ситуацию, когда контейнер вырос с помощью полосы прокрутки для около 50%

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

Здесь я начал искать тег pre и его свойства. Он имеет overflow: auto по умолчанию Bootstrap. Так что я пытался добавить

pre{
  overflow-x: scroll !important;
}

И угадайте, что? Это сработало!

Итак, все, что вам нужно сделать, это добавить overflow-x: scroll !imporant в pre, и вам хорошо идти! Здесь рабочий скрипт.

Надеюсь, что это поможет

Как оповещение. Я думаю, вы хотите переместить max-height: 200px в pre. Он не будет работать, если вы применили его к code.

Ответ 3

Эти стили бутстрапа просто наносят ущерб естественному CSS!

Проблема возникает из-за конфликта между вашим контейнером column -direction flex и правилами начальной загрузки. Это в основном приводит к тому, что горизонтальная полоса прокрутки смещается из окна содержимого pre/code в окно браузера, когда окно содержимого переполняет экран.

С этими настройками ваш желаемый макет, похоже, работает:

• сделать основной .container div основным контейнером flex (в вашем коде эта роль воспроизводится элементом body)
• переместите элемент footer в этот новый контейнер
• используйте flex auto поля, чтобы придерживаться нижнего колонтитула внизу.
• переопределить загрузку margin, padding и width везде, где это необходимо

HTML

<div class="container">

    <div class="row">
        <div class="col-md-12 docs">
            <p>Some sample code</p>
            <pre><code>Loading mirror speeds from ... cached hostfilebase</code></pre>
        </div>
    </div>

    <footer>
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
                    footer
                </div>
            </div>
        </div>
    </footer>

</div>

CSS

html, body { height: 100%; }

body > .container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;                      /* override bootstrap styles */
    padding: 0;                       /* override bootstrap styles */
}

body > .container > .row {
    margin: 0;                        /* override bootstrap styles */
    display: flex;                    /* nested flex container */
    justify-content: center;          /* center content box on page */
}

body > .container > .row > .docs {
    width: 75%;                      /* adjust width of the content box here */
}

code {
    max-height: 200px;
    background-color: #eeeeee;
    word-break: normal !important;
    word-wrap: normal !important;
    white-space: pre !important;
}

footer {
    margin-top: auto;                /* stick footer to bottom of container */
    background-color: #CCC;
}

Пересмотренный скрипт

Протестировано в Chrome и Firefox.

Ответ 4

Проблема, по-видимому, связана с шириной <pre>.

Когда ширина вашего экрана ниже 768px, к .container при загрузке не применяется специальная ширина, поэтому проблема возникает.

Когда ширина экрана превышает 768px, следуют следующие классы из bootstrap.css.

@media (min-width: 1200px)
.container {
    width: 1170px;
}
@media (min-width: 992px)
.container {
    width: 970px;
}
@media (min-width: 768px)
.container {
    width: 750px;
}

Как вы можете видеть, как только ширина будет ниже 768px, конкретной ширины нет.

Чтобы противостоять этой проблеме, вы должны написать свой css, что-то вроде этого.

@media (min-width: 480px) {
 .container {
        width: calc(100% - 40px);
    }
}

В принципе, вы должны указать ширину для .container, когда ширина экрана будет ниже 768px. Как только вы это сделаете, он исправит вашу проблему.

Ответ 5

Обменивайте тег prev и его содержимое на div, как показано ниже.

<div class="code">{your code goes here}</div>

css:

.code{
     width:92vw; /*you can change this in media query to specific device width for better results*/
     overflow-x:auto;
}

Рабочая ссылка jsfiddle