高度50%未填满Safari上flex parent的一半
是一个关于在Safari浏览器上使用flex布局时，父容器高度为50%但子元素未能填满一半高度的问题。
这个问题可能是由于Safari浏览器的一些特殊行为导致的，可以尝试以下解决方案：
- 确保父容器有一个明确的高度值：在flex布局中，父容器的高度需要明确指定一个值，例如使用像素(px)单位或百分比(%)单位。如果父容器的高度未明确指定，Safari可能无法正确计算子元素的高度。
- 使用min-height属性代替height属性：将父容器的高度属性从height改为min-height，这样可以确保父容器的高度至少为指定值，但可以根据内容的高度自动增长。
- 使用flex-grow属性：在子元素上使用flex-grow属性，将其设置为一个大于0的值，以确保子元素能够填充父容器的剩余空间。例如，将flex-grow设置为1，表示子元素可以根据需要扩展以填充剩余空间。
- 使用overflow属性：在父容器上添加overflow属性，并设置为hidden或auto，以确保子元素不会溢出父容器的高度。
- 检查其他CSS属性：检查是否有其他CSS属性或样式规则影响了flex布局的表现，例如padding、margin、border等。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云弹性容器实例（Elastic Container Instance）：https://cloud.tencent.com/product/eci
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库 MySQL 版（TencentDB for MySQL）：https://cloud.tencent.com/product/cdb-for-mysql
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发（Mobile Development）：https://cloud.tencent.com/product/mobdev
- 腾讯云区块链（Blockchain）：https://cloud.tencent.com/product/baas
- 腾讯云元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse
相关·内容
下面有一个包含3个service-details的jsfiddle，其中2个子div的service-box-one & service-box-two需要是父div service-box大小的一半，并且位于父div service-box的底部。这在IE，火狐和Chrome中运行良好，然而，在safari中，div empty-details和service-details不会继承50%的高度，而是位于父div servi
浏览 5提问于2017-12-22得票数 1
回答已采纳
1回答
我有一个附加了侧边栏的应用程序(TPanel --> alRight)，其中使用了一个CategoryPanel (alClient)。此CategoryPanel恰好有2个未对齐的组。我想分享这两组的边界，这样它就会以50/50的比例填满整个面板空间。不幸的是，CategoryGroups在设计时不支持对齐，这迫使我在每次测试应用程序时都要运行它。我尝试将每个CategoryGroup的高度
浏览 4提问于2013-05-21得票数 2
回答已采纳
Chrome正常，Safari失败。怎么才能兼容呢？height:100%; margin: 0; box-sizing: border-box; height: 100%; display: -webkit-box; display: fl
浏览 0提问于2017-08-17得票数 4
1回答
在下面的示例中，使用flex-box布局，我需要黑匣子的高度为蓝色框高度的50%。它甚至有可能做到这一点与弹性盒布局？* {box-sizing: border-box}col1 {border: 1pxsolid green}
col2
浏览 1提问于2016-04-09得票数 3
2回答
我无法使我的弹性框内容填补整个框与足够间隔的每一项内容。这是我的密码和图像。我怎样才能解决这个问题？我试过用线的高度，甚至打破，但没有任何工作。问题是，单个框中的项目没有耗尽该框的全部高度。 width: 100%;}
background-color: white;border: 1px solid green;
浏览 4提问于2022-10-02得票数 0
回答已采纳
1回答
这些必须适应父母，我定义了一个高度，例如100px 文本必须填满它所需要的内容。它可以是一个简单的短语，也可以是一个很长的段落，因此我不能定义一个固定的高度。有了剩余的空间，我想放置一个img，但当我放置它时，图像采用原始img的高度大小。你可以在这里看到我的代码片段： .parent{ width: 100%;
padding:
浏览 18提问于2019-10-02得票数 1
1回答
嘿，我实际上是在做一个有可能连接到多个服务的站点来创建一些动作/反应。我概括了我的服务的显示，它正在工作，但我遇到了一个问题。我不能以我想要的方式显示它们(如图像)。它们都是泛化的一个组成部分。这是我真正的展示：
这是我想要的最后结果：
这是我的反应功能，以防你需要它：return (
浏览 4提问于2022-10-07得票数 0
回答已采纳
1回答
下面的代码片段演示了这个问题:黄色、蓝色和粉红色的条形是基于弯曲的50 in，25%和75%，显示在列和行的flex方向上。如果您在Firefox (或IE11或Edge)中运行它，列和行将按预期划分区域：但如果你在Chrome (47)或Safari (9.0.3)中运行它，左边的列布局似乎完全忽略了挠性基础--酒吧的高度似乎与弯曲基无关：左和右之间唯一的区别是flex-d
浏览 0提问于2016-01-27得票数 6
我遇到了嵌套flex列中的空间管理问题。 下面是我的例子。我有一个具有固定高度的列，以及两个子项:一个具有固定高度，另一个使用"flex: 1 1 auto“填充可用空间。到目前为止，一切都很顺利。但是现在，第二个孩子变成了另一个flex列，有两个孩子。同样的想法:一个孩子有固定的高度，另一个孩子应该填满可用的空间。不起作用！;
display: <
浏览 16提问于2020-09-04得票数 1
回答已采纳
站点菜单所在的top-part和包含信息的content-part。 position: absolute; height: 100%; display: flex; height: 100%; flex: 0 1 auto; flex: 1;
position: relative;一样大，co
浏览 0提问于2019-10-30得票数 1
3回答
我正在创建一个工具栏样式的导航菜单，其中的内容被动态添加到容器中。这是我的方法
我知道这不应该是这样的，但我找不到其他方法来实现这种垂直对齐。任何帮助都是非常感谢的。
浏览 0提问于2013-04-24得票数 0
回答已采纳
在Chrome/FF上，我的flex元素具有相同的高度(最高元素的高度)。但在IE11上，它们每个人都有自己的自然高度，所以它们最终会有不同的高度。<div class="parent">
<div class="
浏览 0提问于2020-09-18得票数 2
容器本身具有flex: 1，因为它也属于带有flex-direction: column的flex parent，并且在引入镜像情况之前，child的行为与预期的一样(采用父对象的100%高度)。在将图像添加到child时，该图像扩展child以适应其高度，有效地child推送parent。
在这种情况下，在图像上使用object-fit: cover无济于事！看起来这是Chrom
浏览 13提问于2020-02-25得票数 1
回答已采纳
我正在建立一个CMS的网站。有相当多的元素需要垂直居中的内容。但是，由于我没有最终的内容(以及将来可以和将要更改的内容)，所以我不能为这些容器设置固定的高度。我花了几分钟的时间试图找出为什么我的元素不能用flexbox...until垂直对齐，我发现这是因为缺少固定的高度。在过去，我使用display:table/table-cell组合来构建这样的布局。现在，我想知道如
浏览 2提问于2016-01-15得票数 4
1回答
要更好地了解该问题，请在firefox和chrome上运行下面的html代码，并查看差异。
这段代码可以在所有浏览器上运行，但Chrome不能。问题是，当您将display设置为flex，将flex-direction设置为column，并将其中一个flex项flex-grow设置为1时，此flex项的内容不能将height设置为100%。你能帮助我在不使用JavaScript或css Calc函数的情况下解决问题吗？因为在实际项目中
浏览 0提问于2016-02-17得票数 4
回答已采纳
2回答
我有以下html正文： <div class="container-fluid h-100 border"> </div>
<div class="row h-50"><d
浏览 1提问于2019-10-02得票数 3
回答已采纳
我的wordpress主题包含一个jquery柔性滑块(版本:jquery.柔性滑块-min.js)，问题是，当我试图通过修改.css中滑块的高度参数(通过设置fix和auto)并上传更窄的图片来更改滑块的高度时，滑块似乎以预期的形状显示，而导航箭头(左、右)则位于滑块的底部，而不是位于中间的位置。如果有人能帮我解决这个问题，我会非常感激的。
提前谢谢你。
浏览 3提问于2014-04-22得票数 0
回答已采纳
1回答
我有一个弹性容器，有两个孩子(蓝色的)，其中一个的高度是600 of。
虽然，在Safari上，父母并不是从它最大的孩子身高推导出它的身高。Safariv13.0上
浏览 0提问于2019-08-02得票数 1
DIV高度值必须作为SCSS的函数进行计算，并在不同的DIV高度上使用。 我搜索了一下，但找不到使用内部变量计算另一个div高度的SCSS函数。我正在尝试创建一个聊天窗口，我希望这个聊天的输入框是position: absolute，并且总是在底部。 问题是，您键入的文本会增加聊天输入框的高度。这意味着确切的高度不是在聊天中确定的。发现了一个确定深红色聊天内容<e
浏览 763提问于2021-01-07得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
