gpt4 book ai didi

css - Safari 中 flex 元素的高度错误

转载 作者:行者123 更新时间:2023-11-28 11:19:37 26 4
gpt4 key购买 nike

在 Safari 中,具有此布局的元素 (div.header) 不会计算其高度。在 Chrome 中它可以工作。

如果您在 Safari 中打开此示例,您将看到 div.header 的高度为 48px(padding-top + padding-bottom)。

如果在Chrome中打开,高度会正常(content + padding)。如何解决这个问题?

* {
box-sizing: border-box;
}

.root {
min-width: 1280px;
height: 100vh;
display: flex;
flex-direction: column;
}

.container {
display: flex;
flex-direction: column;
}

.header {
width: 100%;
background: yellow;
padding: 24px 16px;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
display: flex;
align-items: flex-start;
}

.content {
width: 100%;
padding: 16px;
background: red;
}
<div class="root">
<div class="container">
<div class="header">some content</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer feugiat scelerisque varius morbi enim nunc faucibus a pellentesque. Sed egestas egestas fringilla phasellus faucibus.
Ac odio tempor orci dapibus ultrices. Sodales neque sodales ut etiam sit amet. Ultricies mi eget mauris pharetra et ultrices. Nec ullamcorper sit amet risus nullam eget felis eget. In arcu cursus euismod quis viverra nibh cras pulvinar. Pellentesque
sit amet porttitor eget dolor morbi non. Consectetur a erat nam at lectus urna. Sit amet massa vitae tortor. Orci a scelerisque purus semper eget. Viverra mauris in aliquam sem fringilla ut morbi tincidunt augue. Lectus quam id leo in vitae turpis.
Eget dolor morbi non arcu risus quis. Risus nec feugiat in fermentum posuere urna nec tincidunt praesent. Rhoncus aenean vel elit scelerisque mauris pellentesque. Tincidunt augue interdum velit euismod. Magna sit amet purus gravida quis blandit
turpis cursus in. Vitae tempus quam pellentesque nec nam aliquam sem. Placerat vestibulum lectus mauris ultrices eros. Quis lectus nulla at volutpat diam. Eget mi proin sed libero enim sed. Lobortis mattis aliquam faucibus purus in massa tempor
nec. Ut tellus elementum sagittis vitae et leo duis. Ipsum faucibus vitae aliquet nec ullamcorper sit. Aliquet enim tortor at auctor urna nunc. Cursus turpis massa tincidunt dui ut. Vitae nunc sed velit dignissim sodales ut eu sem integer. Ante
metus dictum at tempor commodo ullamcorper a. Iaculis eu non diam phasellus vestibulum lorem sed risus ultricies. Est lorem ipsum dolor sit amet. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Tincidunt lobortis feugiat vivamus
at augue eget arcu. Congue eu consequat ac felis donec et odio pellentesque. Turpis in eu mi bibendum neque egestas congue. Gravida quis blandit turpis cursus in hac habitasse platea dictumst. Sed euismod nisi porta lorem mollis aliquam ut porttitor
leo. Neque volutpat ac tincidunt vitae semper quis lectus nulla. Quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Nisl pretium fusce id velit ut tortor. Sapien faucibus et molestie ac feugiat sed lectus vestibulum. Eu facilisis sed
odio morbi quis. Suscipit tellus mauris a diam maecenas sed. Malesuada fames ac turpis egestas integer eget aliquet nibh praesent. Ipsum nunc aliquet bibendum enim facilisis gravida neque. At ultrices mi tempus imperdiet nulla malesuada pellentesque
elit eget. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Vestibulum lectus mauris ultrices eros in cursus. Ut enim blandit volutpat maecenas. Volutpat blandit aliquam etiam erat. Lacus suspendisse faucibus interdum
posuere. Tempus egestas sed sed risus pretium quam vulputate. Dictumst quisque sagittis purus sit amet volutpat consequat. Nunc sed id semper risus. Eget mi proin sed libero. Condimentum vitae sapien pellentesque habitant. Volutpat commodo sed egestas
egestas fringilla. Non sodales neque sodales ut. Enim neque volutpat ac tincidunt vitae semper quis lectus nulla. Vitae elementum curabitur vitae nunc. Quisque sagittis purus sit amet volutpat consequat mauris. Tristique sollicitudin nibh sit amet
commodo nulla facilisi nullam vehicula. Ac placerat vestibulum lectus mauris ultrices eros in. Hendrerit gravida rutrum quisque non tellus orci ac. Proin libero nunc consequat interdum varius sit amet mattis vulputate. Suspendisse faucibus interdum
posuere lorem ipsum dolor sit amet consectetur. Egestas congue quisque egestas diam in arcu cursus euismod. Ut porttitor leo a diam sollicitudin tempor id eu nisl. Gravida cum sociis natoque penatibus et magnis dis parturient. Mauris pharetra et
ultrices neque ornare aenean euismod elementum nisi. Aliquam eleifend mi in nulla posuere sollicitudin. Condimentum lacinia quis vel eros. Elementum curabitur vitae nunc sed velit dignissim sodales ut. Libero volutpat sed cras ornare arcu dui vivamus
arcu. Non quam lacus suspendisse faucibus interdum posuere. Urna cursus eget nunc scelerisque. Facilisis volutpat est velit egestas. Neque egestas congue quisque egestas diam. Cum sociis natoque penatibus et magnis dis parturient. Commodo quis imperdiet
massa tincidunt.
</div>
</div>
</div>

最佳答案

Safari 存在问题,您需要定义 flex-shrink

将此添加到您的代码中:

.header { flex-shrink: 0 }

关于css - Safari 中 flex 元素的高度错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57044598/

26 4 0
文章推荐: javascript - 需要从字符串 php 中删除这个特殊字符
文章推荐: javascript - javascript 中整数键的 HashMap
文章推荐: css - Susy 响应式网格
文章推荐: javascript - 当表单与ajax提交事件一起使用时,为什么通常使用
而不是
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com