Html CSS网格样式按钮的Chrome问题

我一直在努力使CSS网格在Chromium上的按钮上工作。它在Firefox上运行良好，但在Chromium上出现了一些问题。栅格将显示为未定义第二列

以下是基本代码：

<button className="container">
   <div className="header"></div>
   <div className="child"></div>
   <div className="child"></div>
   <div className="child"></div>
   <div className="child"></div>
</button>

将此代码应用于按钮会产生以下结果：

它的行为不符合预期。将标签从“button”更改为“div”，可使其在Chrome上正常工作：

当然，我把大纲设置为0等等。Firefox似乎能够正确地显示这两个方面

由于将div与onClick属性一起使用不是一个好的解决方案，我可以做些什么来解决这个问题

这个怎么样

<button>
   <div className="container">
       <div className="header"></div>
       <div className="child"></div>
       <div className="child"></div>
       <div className="child"></div>
       <div className="child"></div>
   </div>
</button>

是的，它很管用，谢谢你的解决方案，但这难道不是一种奇怪的行为吗？我见过类似你的帖子，这些网格按钮在Firefox上很管用，但在Chrome上却不管用。有人说这是一只虫子。

<button>
   <div className="container">
       <div className="header"></div>
       <div className="child"></div>
       <div className="child"></div>
       <div className="child"></div>
       <div className="child"></div>
   </div>
</button>