我的CSS网格布局存在问题，该问题仅在macOS Safari上发生（在v13.1上进行测试）。以下代码段应产生一个label和一个textfield-后者延伸到div容器的整个宽度。在Chrome和Firefox中可以使用，但Safari不能使用。有趣的是，在调整窗口大小时，布局会固定到位，但是在聚焦文本字段时，布局会再次中断。
<html>
<head>
<title>Test</title>
<style type="text/css">
body {
display: flex;
flex-direction: column;
overflow: hidden;
}
div {
background-color: lightcoral;
display: grid;
grid-template-columns: auto 1fr;
align-items: baseline;
}
</style>
</head>
<body>
<div>
<label>Label</label>
<input type="text" placeholder=" ">
</div>
</body>
</html>
从display标记中删除overflow或body属性时，网格布局按预期工作。但是在发生此问题的环境中，这两个属性都是必需的。因此，无法通过删除这些属性来解决该问题。当将align-items更改为baseline以外的任何内容时，问题也消失了。不幸的是baseline对齐也是所需布局的关键。
这种行为对我来说似乎是Safari中的一个错误，但是我想请第二意见。如果有解决方案，我将很高兴与您分享。
BTW：具有单个空格字符的空placeholder已经解决了Safari中baseline对齐的问题。没有它，空的文本字段将在底部而不是在它们的baseline处对齐。
对于Safari输入的父级，应使用display:block来控制其宽度
body {
display: flex;
flex-direction: column;
overflow: hidden;
}
.test {
background-color: lightcoral;
display: block;
padding: 1rem;
}
.test label {
width: 40px;
}
.test input {
width: calc(100% - 40px);
float: right;
padding: 0;
outline: 0;
-webkit-appearance: none;
border: 0;
}<html>
<head>
<title>Test</title>
</head>
<body>
<div class="test">
<label>Label</label>
<input type="text" placeholder=" ">
</div>
</body>
</html>