Скрытый контент в Chrome с горизонтально центрированным макетом Flexbox

Основываясь на этот пример, я пытаюсь центрировать контент по горизонтали с помощью flex css, и обычно все идет правильно. Но когда контент очень большой, левая часть скрывается. Так бывает в Chrome, и горизонтальная полоса прокрутки не помогает. Как вы можете видеть во фрагменте. Что мне нужно изменить, чтобы все было правильно?

.flex-container {
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row {
    width: auto;
    border: 1px solid blue;

}
.flex-item {
    background-color: tomato;
    padding: 0px;
    white-space: nowrap; /* added to simulate large content */
    margin: 0px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: left;
}

<div class = "flex-container">
    <div class = "row"> 
        <div class = "flex-item">hidden.............................somewhere.....................................................................................................end</div>
        <div class = "flex-item">where</div>
        <div class = "flex-item">I</div>
        <div class = "flex-item">am?</div>
    </div>
</div>

Как видите, это другая формулировка проблемы с flexbox: здесь

Ваши гибкие элементы не являются такими, поскольку у них нет гибкого родителя.

— 26.09.2018 14:23

Это то, что вам нужно - codepen.io/Paulie-D/pen/dqxdNz

— 26.09.2018 14:28

Поли извини, что твой код не работает. Работает только на большом экране.

— 26.09.2018 14:38

Затем вам нужно подробно объяснить проблему, потому что она не ясна.

— 26.09.2018 14:47

html css flexbox

26.09.2018 14:17

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

221

Ответы 2

Пожалуйста, попробуйте следующий код.

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.flex-item {
    background-color: tomato;
    margin: 0px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: left;
    max-width: 100%;
    flex-grow: 1;
    padding-right: 15px;
    padding-left: 15px;
}

<div class = "flex-container">
    <div class = "row">
        <div class = "flex-item">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
        <div class = "flex-item">where</div>
        <div class = "flex-item">I</div>
        <div class = "flex-item">am?</div>
    </div>
</div>

Извините, вы слишком сильно изменились. Я хочу сохранить flexbox justify-content: center;

— 26.09.2018 15:20

Хорошо, без проблем, но я просто пытаюсь решить вашу проблему

— 26.09.2018 15:22

26.09.2018 14:43

.flex-container {
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  flex-direction:column;
    align-items: center;
    justify-content: center;
}

.flex-item {
    background-color: tomato;
    padding: 0px;
    white-space: nowrap; /* added to simulate large content */
    margin: 0px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: left;
}

<div class = "flex-container">

        <div class = "flex-item">hidden.............................somewhere.......................................................................................................</div>
        <div class = "flex-item">where</div>
        <div class = "flex-item">I</div>
        <div class = "flex-item">am?</div>

</div>

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

— 26.09.2018 15:18

26.09.2018 14:47