Safari 中嵌套的 Flexbox 不一致

Question

请检查以下代码片段。除了 Safari 之外，所有市长浏览器都遵守

height: 100%;

声明。对于 Safari，

flex-basis: 50px;

显然“无效”了高度设置。

我觉得这是 Safari 中的一个错误。然而，由于布局并不简单，我对规格了解不够，无法确定。有谁知道其他浏览器的行为是否是“正确”的行为，或者这只是一个灰色区域？而且，如果是错误，我应该在哪里报告？

尝试过的浏览器：

铬116
边缘117
火狐118
Safari 16.6

body {
  background: green;
}

.outer {
  display: flex;
  flex-direction: column;
  height: 300px;
  
  width: 500px;
  background: black;
}

.middle {
  display: flex;
  flex-direction: column;
  height: 100%;
  
  flex-basis: 50px; /* this declaration makes a difference ONLY in Safari */

  width: 400px;
  background: red;
}

.inner {
  flex: 1;
  min-height: 700px;

  width: 100px;
  background: blue;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <body>
    
    <div class="outer">
      <div class="middle">
        <div class="inner"></div>
      </div>
    </div>

  </body>
</html>

这就是 Safari 中的样子：

这就是它在其他浏览器中的样子：

Answer 1

如果你想让外侧和中间高度相同，为什么外侧是300px，中间是100%？

您尝试过让它们保持相同的高度吗？

由于内部是中间的子级并且具有

min-height: 700px;

，因此它将使中间和外部也变得更大。然后你把

height: 100%

放在中间，这将是 700px。外部保持原样是因为绝对值

height: 300px

Safari 中嵌套的 Flexbox 不一致

问题描述投票：0回答：1

1个回答

最新问题

Safari 中嵌套的 Flexbox 不一致

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1