大家好，我在用 flex 排版一个网页时发现了一个问题：同样的代码在 QQ 浏览器的显示效果和别的浏览器不一样。我写了一个示例页面来简化并演示我遇到的问题。下面分别是 fiefox 浏览器显示效果（正常）、edge 浏览器显示效果（正常）和 QQ 浏览器显示效果（不正常）。代码我放到最后。
上面这张图是 firefox 的正常显示效果。
上面这张图是 edge 的正常显示效果。
上面这张图是 QQ 浏览器的不正常展示。
这是我的 html 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=divice-width, initial-scale=1.0">
<title>
测试 flex
</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div class="left">左边不重要</div>
<div class="right">
<div class="right_head">
<div class="right_head_title">
这里是文章标题
</div>
<div class="right_head_des">
这里是文章描述，这篇文章有一百万亿个字，需要阅读一万年。
</div>
</div>
<div class="right_main">
<div class="right_main_article">
<h1>1.这里是第一个标题</h1>
<p>
旧历的年底毕竟最像年底，村镇上不必说，就在天空中也显出将到新年的气象来。灰白色的沉重的晚云中间时时发出闪光，接着一声钝响，是送灶的爆竹；近处燃放的可就更强烈了，震耳的大音还没有息，空气里已经散满了幽微的火药香。我是正在这一夜回到我的故乡鲁镇的。虽说故乡，然而已没有家，所以只得暂寓在鲁四老爷的宅子里。他是我的本家，比我长一辈，应该称之曰“四叔”，是一个讲理学的老监生。他比先前并没有什么大改变，单是老了些，但也还末留胡子，一见面是寒暄，寒暄之后说我“胖了”，说我“胖了”之后即大骂其新党。但我知道，这并非借题在骂我：因为他所骂的还是康有为。但是，谈话是总不投机的了，于是不多久，我便一个人剩在书房里。
</p>
<figure>
<img src="image.jpg" alt="测试图片">
</figure>
<h1>2.这里是第二个标题</h1>
<p>
第二天我起得很迟，午饭之后，出去看了几个本家和朋友；第三天也照样。他们也都没有什么大改变，单是老了些；家中却一律忙，都在准备着“祝福”。这是鲁镇年终的大典，致敬尽礼，迎接福神，拜求来年一年中的好运气的。杀鸡，宰鹅，买猪肉，用心细细的洗，女人的臂膊都在水里浸得通红，有的还带着绞丝银镯子。煮熟之后，横七竖八的插些筷子在这类东西上，可就称为“福礼”了，五更天陈列起来，并且点上香烛，恭请福神们来享用，拜的却只限于男人，拜完自然仍然是放爆竹。年年如此，家家如此，——只要买得起福礼和爆竹之类的——今年自然也如此。天色愈阴暗了，下午竟下起雪来，雪花大的有梅花那么大，满天飞舞，夹着烟霭和忙碌的气色，将鲁镇乱成一团糟。我回到四叔的书房里时，瓦楞上已经雪白，房里也映得较光明，极分明的显出壁上挂着的朱拓的大“寿”字，陈抟老祖写的，一边的对联已经脱落，松松的卷了放在长桌上，一边的还在，道是“事理通达心气和平”。我又无聊赖的到窗下的案头去一翻，只见一堆似乎未必完全的《康熙字典》，一部《近思录集注》和一部《四书衬》。无论如何、我明天决计要走了。
</p>
<h1>3.这里是第三个标题</h1>
<p>
况且，一直到昨天遇见祥林嫂的事，也就使我不能安住。那是下午，我到镇的东头访过一个朋友，走出来，就在河边遇见她；而且见她瞪着的眼睛的视线，就知道明明是向我走来的。我这回在鲁镇所见的人们中，改变之大，可以说无过于她的了：五年前的花白的头发，即今已经全白，全不像四十上下的人；脸上瘦削不堪，黄中带黑，而且消尽了先前悲哀的神色，仿佛是木刻似的；只有那眼珠间或一轮，还可以表示她是一个活物。她一手提着竹篮。内中一个破碗，空的；一手拄着一支比她更长的竹竿，下端开了裂：她分明已经纯乎是一个乞丐了。
</p>
</div>
<div class="right_main_footnote">
这里是脚注。
</div>
</div>
<div class="right_comments">
<p>写得真好！</p>
<p>写得真好！</p>
<p>写得真好！</p>
<p>写得真好！</p>
<p>写得真好！</p>
<p>写得真好！</p>
<p>写得真好！</p>
<p>写得真好！</p>
<p>写得真好！</p>
<p>写得真好！</p>
<p>写得真好！</p>
<p>写得真好！</p>
</div>
</div>
</body>
</html>
这是我的 CSS 代码：
@charset"utf-8";
*{
border-width: 0;
margin: 0;
padding:0;
}
body {
display: flex;
overflow: hidden;
height: 100vh;
}
.left{
display: flex;
order: 1;
width: 25vw;
height: 100vh;
background-color: red;
}
.right{
display: flex;
flex-direction: column;
order: 2;
padding-left: 2rem;
padding-right: 2rem;
overflow-y: auto;
height: 100vh;
background-color: yellow;
}
.right_head{
display: flex;
flex-direction: column;
order: 1;
padding-top: 5rem;
padding-left: 5rem;
padding-right: 5rem;
background-color: lightblue;
}
.right_head_title{
display: flex;
order: 1;
font-size: 2.3rem;
font-weight: 600;
background-color: orange;
}
.right_head_des{
display: flex;
order: 2;
font-size: 1.25rem;
background-color: lightgrey;
}
.right_main{
display: flex;
flex-direction: column;
order: 2;
padding-top: 5rem;
margin-left: 6%;
margin-right: 6%;
margin-bottom: 3rem;
background-color: lightgreen;
}
.right_main_article{
display: flex;
flex-direction: column;
order: 1;
font-size: 1.2rem;
margin-left: 3rem;
margin-right: 3rem;
margin-bottom: 3rem;
overflow-x: auto;
overflow-y: hidden;
background-color: ivory;
}
.right_main_article h1{
margin-bottom: 0.6rem;
margin-left: 2rem;
margin-right: 2rem;
font-size: 1.8rem;
font-weight: 800;
background-color: cyan;
}
.right_main_article p{
margin-bottom: 0.6rem;
margin-left: 1.5rem;
margin-right: 1.5rem;
text-indent: 2.4rem;
line-height: 160%;
background-color: darkorange;
}
.right_main_footnote{
display: flex;
order: 2;
margin-left: 2rem;
margin-right: 2rem;
background-color: pink;
}
.right_comments{
display: flex;
flex-direction: column;
margin-left: 8rem;
margin-right: 8rem;
background-color: grey;
color: white;
order: 3;
}
我自己发现了一个问题，即，把 CSS 代码中的第 69-72 行注释掉能让 QQ 浏览器把第二个段落显示出来，但问题依旧没有解决，请看：
上面这张是把那几行注释掉以后的 QQ 浏览器的显示效果。
首先能排除是 flex 兼容问题引起的。这是因为我在网上搜索了一下，发现了这个神奇的网站： https://autoprefixer.github.io/ 我选它默认的 last 4 version 帮我把 CSS 都纠正了一遍以便兼容大多数浏览器，但问题依旧，所以我觉得不是这个问题。CSS 代码为了更简单，上面只是贴了原始代码。
我的问题就是：为什么 QQ 浏览器的显示效果是这样的呢？这是 QQ 浏览器的 bug 么？我觉得我 flex 的用法应该没问题吧？（都是照着阮一峰老师的博客学习的，而且别的浏览器也都挺正常的。）还是说，我的 flex 用法其实并不标准，是 forefox edge 等浏览器自动帮我搞好了？
我并不是一个专业的前端，甚至都不是程序员，我只是在自己试着写一个博客的时候边学边搞，最后遇到了这个问题。我有点不太清楚这个问题该怎么描述，所以也没查到什么对我有用的信息，所以就来这里请教一下大家。我的代码写得很啰嗦，请大家不要嘲笑我。
回答2
-
大家好！在评论区一位大佬的启发下我发现了问题的关键。
本质上，是在 flex container 上如果设置了 overflow-y: auto 和 height: 100vh ，QQ 浏览器就会试图把这个 container 中的所有东西都在一个屏幕高度内塞下，塞不下它就会覆盖，导致显示异常。而其他浏览器（firefox, chrome, edge）就不会这么愚蠢。如果这两句确实不能删掉（比如我希望固定左边栏，右边进行滚动），知道了问题的关键也就容易解决了。
解决的方法是在每个 flex-item 中加上 flex-shrink: 0 。这是因为默认情况下 flex-shrink 的值是 1，表示空间不够的时候等比例压缩，改成 0 就可以让愚蠢的 QQ 浏览器不做蠢事了，而其他浏览器也都没问题。
示例代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=divice-width, initial-scale=1.0"> <title>flex 纵向排列问题展示</title> <style> .flex-container{ overflow-y: auto; height: 100vh; display: flex; flex-direction: column; background-color: lightyellow; } .flex-item-up{ display: flex; order: 1; background-color: lightgrey; } .flex-item-middle{ display: flex; order: 2; background-color: lightgreen; } .flex-item-bottom{ display: flex; order: 3; background-color: lightblue; } .object{ border:5px solid black; margin:30px; width: 600px; height: 400px; background-color: pink; } </style> </head> <body> <div class="flex-container"> <div class="flex-item-up"> <div class="object"></div> </div> <div class="flex-item-middle"> <div class="object"></div> </div> <div class="flex-item-bottom"> <div class="object"></div> </div> </div> </body> </html>这个问题比较简单，我就不截效果图了。真是没想到这么简单的问题竟然折磨了我这么久。。。。。。。。请大佬们不要嘲笑我。。。。。。
支持 0 反对 0 举报2022-01-04 08:27
-
要不是大王卡，谁用qq浏览器。先不谈它的性能多么垃圾，就它的广告:
- 广告比内容还多
- <video>标签强行嵌入广告
- 切到后台进别的应用，它还弹一个popup广告
支持 0 反对 0 举报2022-01-04 09:17
