html - Why is there a white space between my button and its border?

Question

Web app

snippet

I'm running into a problem with the height of a button in Chrome. It works in Firefox just fine, but it's not filling in the entire height though I have it set to 100%. It's not making much sense to me, so can someone please explain this to me?

It seems to work in the snippet? I'm 100% not using JavaScript to set any of this: purely the CSS I have listed below.

It wasn't a problem until today...which is super weird.

body {
 background-color: dimgrey;
 margin: 0;
 padding: 0;
}
.topbar {
  border-radius: 0px;
  border-bottom: 1px lightgrey solid;
  margin-bottom: 0px;
  background-color: white;
  max-width: calc(80%-1px);
  height: 60px;
  max-height: 60px;
  text-align: right;
  display: flex;
}
.login-button {
  max-width: 15%;
  min-width: 15%;
  background-color: tomato;
  border: none;
  border-left: 1px lightgrey solid;
  login_text: 'color';
  color: white;
  outline: none;
  cursor: pointer;
  font-size: 30px;
  height: 100%;
}
.e-mess {
  width: 85%;
  height: 100%;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class='topbar'>
  <div class='e-mess'></div>
  <button class='login-button'>login</button>
</div>

Answer 1

我不确定为什么会出现这个问题，但我必须为该类设置min-height属性。topbar

.topbar {
  border-radius: 0px;
  border-bottom: 1px lightgrey solid;
  margin-bottom: 0px;
  background-color: white;
  max-width: calc(80%-1px);
  min-height: 60px;
  height: 60px;
  max-height: 60px;
  text-align: right;
  display: flex;
}