Question

我正面临一个可能与flexbox misbehaving with max-height有关的奇怪问题，但到目前为止我没有找到任何纯粹的CSS解决方案。

我做了一个摘要来总结这个问题。如果你调整窗口大小以降低其高度，在某些时候你应该在第一个区块中有一个滚动条，但如果你回到更高的高度，即使有足够的空间，滚动条也不会消失，除非你把你的鼠标悬停在它上面（感觉很烦）：https://plnkr.co/edit/VsJ7Aw8qZdSM1iJeL7Bj?p=preview

我有一个主容器（在flex中）包含2个块（也在flex中）主容器的高度设置为100％，允许它根据窗口大小自行调整大小两个孩子都有固定的内容，并且溢出设置为自动第一个孩子的最大高度为％，以便让第二个孩子有更高的身高。

这个问题似乎来自于这个最大高度规则。如果你删除它，那么没有问题，但我需要这个最大高度...
我不想使用类似的东西：

.max { flex: 1 1 auto; }
.all { flex: 3 1 auto; }

因为它会使我的第一个块高于其内容，具体取决于窗口大小。我希望第一个块最多具有其内容高度。

所以我的问题是：它是许多浏览器中的实现问题（可能全部，但我只在Chrome，IE10和IE11中测试过），或者我的逻辑有问题吗？谢谢。

更新：在本例中我使用了固定高度的内容，但在我的项目中，它是一个包含n个元素的列表。所以我无法用px值设置我的最大高度。

UPDATE2：我不能在.max max-height属性中使用vh，因为它需要100vh作为视口高度的100％（基本上是浏览器窗口高度）。但在我的上下文中，.main已经在其他容器中了。这些容器已经定义了它们的高度并且小于我的窗口高度。

/* 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>

Answer 1

这是一个错误，在Chrome中，在FF和Edge中进行测试，它运行正常。

由于您使用完整视口高度，请将max-height: 40%;更改为max-height: 40vh;。

另一种方式，如下面的示例所示，是将100%中的height: 100%更改为100vh。

我认为这样做效果更好，因为像vh这样的视口单元是固定单位，而百分比不是。

Plnkr演示：https://plnkr.co/edit/66W4a2lOI58XLudCmkw9?p=preview

＆＃13;

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;
}

＆＃13;

<div class="main">
  <div class="max">
    <div class="content"></div>
  </div>
  <div class="all">
    <div class="content"></div>
  </div>
</div>

＆＃13;

Answer 2

是的，它有毛病。如果增加窗口的高度，则第一个框的高度不会更新，除非：

你再次降低身高
“把你的鼠标放在它上面”（这里没有明白你的意思）

恕我直言，这是一个浏览器错误。

如果你将flex-grow设置为第一个框的大于0的任何值，如果你增加窗口的高度（正如你所期望的那样），则高度会正确更新但是使用flex-grow不是一个选项，因为盒子可能会比其内容增长更大。

而不是使用max-height：40％，你应该使用与.content完全相同的高度，并使用flex-grow：1来规避“浏览器错误”

css - 使用flexbox和max-height

2 个答案: