html – Flex容器的高度在Safari中无法正常工作

概述所以我有一个带有列和最大高度的flexbox,使列在3列中彼此相邻. 这在Chrome中运行良好,但在Safari中,它似乎只使用最后(最右边)列来设置容器的实际高度. 我在这里举了一个例子： section { display: flex; flex-direction: column; flex-wrap: wrap; max-height: 400px; padding: 所以我有一个带有列和最大高度的flexBox,使列在3列中彼此相邻.

这在Chrome中运行良好,但在Safari中,它似乎只使用最后(最右边)列来设置容器的实际高度.

我在这里举了一个例子：

section {  display: flex;  flex-direction: column;  flex-wrap: wrap;  max-height: 400px;  padding: 10px;  border: 1px solID green;}div {  flex-basis: 100px;  wIDth: 100px;  background-color: red;  margin: 10px;}

<section>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div></section>

Chrome和Safari中的结果将在下方进行屏幕截图.

铬：

苹果浏览器：

这似乎是一个明显的错误,但我找不到任何有关它的信息.

我想知道的是：

>这有什么变通方法吗？和
>它是否被报告为错误？

解决方法 如 another answer about Safari problems with flexbox所述,因为flex相对较新(CSS3),并非所有浏览器都按预期工作.在某些浏览器中,Flex布局部分受支持或完全拙劣,具体取决于您应用的属性组合.

在这种特殊情况下,Safari只是拒绝在Flex容器上确认max-height：400px.但是,如果Flex容器没有响应,您可以从父级获得帮助.

这就是你现在所处的位置：

section {  display: flex;  flex-direction: column;  flex-wrap: wrap;  max-height: 400px; /* not working in Safari */  wIDth: 400px;  padding: 10px;  border: 1px solID green;}

试试这个：

body {    display: flex;    max-height: 400px;}section {  display: flex;  flex-direction: column;  flex-wrap: wrap;  wIDth: 400px;  padding: 10px;  border: 1px solID green;}

body {    display: flex;    max-height: 400px;}section {  display: flex;  flex-direction: column;  flex-wrap: wrap;  wIDth: 400px;  padding: 10px;  border: 1px solID green;}div {  height: 100px;  wIDth: 100px;  background-color: red;  margin: 10px;}

<section>  <div></div>  <div></div>  <div></div>  <div ></div>  <div></div>  <div></div>  <div></div></section>

另外要记住的是,使用列包装的flex布局有很多错误.它可能是今天flexBox中最容易出错的区域.以下是另外两个例子：

> When flexbox items wrap in column mode,container does not grow its width
> Flexbox: wrong width calculation when flex-direction: column,flex-wrap: wrap

总结

以上是内存溢出为你收集整理的html – Flex容器的高度在Safari中无法正常工作全部内容，希望文章能够帮你解决html – Flex容器的高度在Safari中无法正常工作所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。