css - scrollbox和max-height的滚动问题 [英] css - scroll issue with flexbox and max-height
问题描述
我遇到了一个奇怪的问题，可能与 flexbox行为失误max-height ，但到目前为止，我没有找到任何纯CSS解决方案。
我做了一个plunker总结问题。如果你调整窗口大小以减小它的高度，在某些时候你应该在第一个块中有一个滚动条，但如果你回到一个更高的高度，即使有足够的空间，滚动条不会消失，除非你把你的鼠标在它（感觉非常bugy）： https://plnkr.co/edit/VsJ7Aw8qZdSM1iJeL7Bj?p =预览
我有一个主容器（在flex中）包含2个块（也是flex）。
主容器的高度设置为100％，允许它在窗口大小后自行调整大小。
$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $第一个孩子的最大高度为％，以便让更高的第二个孩子。
这个问题似乎来自这个max-height规则。如果你删除它，那么没有问题，但我需要这个max-height ...
$
我不想使用像：
.max {flex：1 1 auto; }
.all {flex：3 1 auto; }
，因为它会使我的第一个块高于其内容，具体取决于窗口大小。我希望第一个块最多有它的内容高度。
所以我的问题是：这是一个实现问题在许多浏览器（也许所有，但我只测试它在Chrome，IE10和IE11），还是在我的逻辑错了？
谢谢。
更新：我在本例中使用固定高度的内容，项目它是一个列表中的n个元素。所以我不能真正设置我的最大高度与px的值。
UPDATE2：我不能使用vh .max max-height属性，因为它需要100vh作为100％的视口高度（基本上是您的浏览器窗口高度）。但在我的上下文中，.main已经在其他容器中。这些容器已经定义了高度，并小于我的窗口高度。
/ * stylees go here * / html {height：100％;} body {height：calc（100％ - 16px）;}。 flex-direction：column;高度：100％; width：100％;}。max，.all {display：flex; flex-direction：column; width：100％; overflow-y：auto;}。max {flex：0 1 auto; min-height：103px; max-height：40％; background-color：green;}。all {flex：2 1 auto; min-height：235px; background-color：blue;}。content {flex：0 0 auto; box-sizing：border-box; height：200px; margin：5px; border：1px black black; background-color：white;}
<！DOCTYPE html> ;< html>< head> < link rel =stylesheethref =style.css>< / head>< body> < div class =main> < div class =max> < div class =content>< / div> < / div> < div class =all> < div class =content>< / div> < / div> < / div>< / body>< / html>
这是一个错误，在Chrome中是一个测试，在FF和Edge，它工作正常。视口高度，将 max-height：40％; 更改为 max-height：40vh; 。
另一种方法，如下面的示例，是改变中的 100％ / code>到 100vh 。
我想这更好，因为视口单元<$ c $
Plnkr演示： https://plnkr.co/edit/66W4a2lOI58XLudCmkw9?p=preview
div class =snippetdata-lang =jsdata-hide =falsedata-console =truedata-babel =false>
html {height：100vh;} body {height：calc（100vh - 16px）;}。 flex-direction：column;高度：100vh; width：100％;}。max，.all {display：flex; flex-direction：column; width：100％; overflow-y：auto;}。max {flex：0 1 auto; min-height：103px; max-height：40％; background-color：green;}。all {flex：11 auto; min-height：235px; background-color：blue;}。content {flex：0 0 auto; box-sizing：border-box; height：200px; margin：5px; border：1px black black; background-color：white;}
< div class = main> < div class =max> < div class =content>< / div> < / div> < div class =all> < div class =content>< / div> < / div>< / div>
I'm facing a strange issue that might have link with flexbox misbehaving with max-height, but so far I didn't find any pure css solution.
I made a plunker to summarize the problem. If you resize your window to reduce its height, at some point you should have a scrollbar in the first block, but if you get back to a higher height, even if there is enough space, the scrollbar won't disappear unless you put your mouse over it (which feels very bugy) : https://plnkr.co/edit/VsJ7Aw8qZdSM1iJeL7Bj?p=preview
I have a main container (in flex) containing 2 blocks (also in flex).
The main container has its height set to 100%, allowing it to resize itself following the window size.
Both children have a fixed content and an overflow-y set to auto.
The first child has a max-height in % to let more height to the second child.
The issue seems to come from this max-height rule. If you remove it, then there's no problem, but I need this max-height...
I don't want to use something like:
.max { flex: 1 1 auto; }
.all { flex: 3 1 auto; }
because it would make my first block higher than its content depending on the window size. I want the first block to have at most its content height.
So my question is: Is it an implementation issue in many browsers (maybe all, but I only tested it in Chrome, IE10 and IE11), or is something wrong in my logic ? Thank you.
UPDATE: I used a fixed height for my content in this example, but in my project it's a list of n elements in it. So I can't really set my max-height with px value.
UPDATE2: I can't use vh in .max max-height property because it takes 100vh as 100% of viewport height (basically your browser window height). But in my context, .main is already in other containers. Those containers have already their heights defined and are smaller than my window height.
/* Styles go here */
html {
height: 100%;
}
body {
height: calc(100% - 16px);
}
.main {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.max,
.all {
display: flex;
flex-direction: column;
width: 100%;
overflow-y: auto;
}
.max {
flex: 0 1 auto;
min-height: 103px;
max-height: 40%;
background-color: green;
}
.all {
flex: 2 1 auto;
min-height: 235px;
background-color: blue;
}
.content {
flex: 0 0 auto;
box-sizing: border-box;
height: 200px;
margin: 5px;
border: 1px dashed black;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="max">
<div class="content"></div>
</div>
<div class="all">
<div class="content"></div>
</div>
</div>
</body>
</html>
It is a bug, in Chrome, a test in FF and Edge, it works fine.
Since you use full viewport height, change the max-height: 40%; to max-height: 40vh;.
Another way, as in below sample, is to change the 100% in height: 100% to 100vh.
I guess this works better because viewport units like vh is a fixed unit, which percent is not.
Plnkr demo: https://plnkr.co/edit/66W4a2lOI58XLudCmkw9?p=preview
html {
height: 100vh;
}
body {
height: calc(100vh - 16px);
}
.main {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
}
.max,
.all {
display: flex;
flex-direction: column;
width: 100%;
overflow-y: auto;
}
.max {
flex: 0 1 auto;
min-height: 103px;
max-height: 40%;
background-color: green;
}
.all {
flex: 1 1 auto;
min-height: 235px;
background-color: blue;
}
.content {
flex: 0 0 auto;
box-sizing: border-box;
height: 200px;
margin: 5px;
border: 1px dashed black;
background-color: white;
}
<div class="main">
<div class="max">
<div class="content"></div>
</div>
<div class="all">
<div class="content"></div>
</div>
</div>
这篇关于css - scrollbox和max-height的滚动问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
