Latest Google Chrome version breaks CSS

user_3144913 0
Viewed 1148

After updating to the latest chrome version (87.0.4280.66 (Official Build) (64-bit)) an element with margin bottom no longer gets that margin when it is inside a parent with 100% height.

Could you please tell me if this can be reported to Google as a bug, or if what they do now is how it always should have been and so every other browser basically has a bug and Chrome is the only one who does it right?

HTML

<html>
<body>
<div>
test
</div>
</body>
</html>

CSS

body,
html {
  height: 100%;
}

body {
  background-color: red;
}

div {
  background-color: white;
  min-height: calc(100vh - 32px);
  margin-bottom: 200px;
}

JS Fiddle here: https://jsfiddle.net/nez3aLqx/1/ (try it in latest chrome vs firefox)

Expected result (how it looks in previous version of chrome or any other browser that I have): enter image description here

Actual result: enter image description here

google-chrome css
1 Answers

you can use !important in css to get priyority over others like the code below, hope that can solve the issue,

div {
  background-color: white;
  min-height: calc(100vh - 32px);
  margin-bottom: 200px !important;
}
user_140946450
Related