野生动物园显示flex全高内容

时间:2020-04-26 13:28:35

标签: css safari height display

我正在研究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

非常感谢您的帮助

0 个答案:

没有答案