сафари дисплей flex полная высота содержимого - PullRequest
Новая
       24

сафари дисплей flex полная высота содержимого

0 голосов
/ 26 апреля 2020

Я работаю над контейнером flex. Он хорошо работает в IE, FF и Chrome, но не в Safari. Я просто хочу установить контейнер с div внутри, который содержит текст. Текст должен быть вертикально центрирован в контейнере и прокручиваться, если высота больше. Контейнер должен быть абсолютной позицией для моего примера.

Вот мой код: 

<div class="container c1">
        <div class="content">/!\ START /!\ Sed ultrices nec felis ut rhoncus. Maecenas sit amet quam non orci semper laoreet vel ut ante. Donec sed pellentesque magna. Ut faucibus odio massa, id consectetur urna molestie vel. Suspendisse finibus imperdiet euismod. Proin ut augue nec justo facilisis ullamcorper. Cras accumsan dapibus tellus, non aliquet elit venenatis sed. Quisque ultrices, nibh sit amet fermentum suscipit, tortor nulla dapibus diam, sed vestibulum nisl ipsum id quam. Suspendisse vestibulum neque fringilla nunc blandit, quis tempor sapien elementum. Etiam metus mauris, lobortis vitae lorem vitae, luctus pellentesque nisl. Fusce sed orci orci. Fusce venenatis eget nisi et gravida. Nam non magna eu velit imperdiet convallis. Nullam malesuada lorem vel vestibulum hendrerit. In orci mi, imperdiet quis enim sit amet, lobortis sollicitudin lorem. Curabitur tellus ex, feugiat eu quam eget, congue mattis purus.</div>
    </div>
    <div class="container c2">
        <div class="content">text need to be centered vertically</div>
    </div>


.container {
            color: #000;
            font-size: 20px;
            overflow-y: auto;
            text-align: left;
            display: flex;
            flex: 0 0 auto;
            flex-direction: column;
            width: 300px;
            height: 500px;
            position: absolute;
            overflow-y: auto;
            background: #aaa;
        }
        .c1 {
            left: 0;
        }
        .c2 {
            left: 320px;
        }
        .content {
            box-sizing: border-box;
            word-wrap: break-word;
            padding: 3px 6px 4px;
            align-items: center;
            display: flex;
            height: 3000px;
        }

Мой кодекс здесь: https://codepen.io/lokomass/pen/gOaWRwm

Вот что я хочу (IE, FF, chrome):

enter image description here

Вот что у меня есть в iPhone (прокрутка Это минимум и не вижу весь текст)

enter image description here

Большое спасибо за вашу помощь

...