Chrome width resize bug

evolutionxbox commented 7 years ago

Platform

MacBook Pro 15" - macOS 10.12.5 - Chrome 60.0.3112.113 (64bit)

Description

Content will not reduce width inside a grid with fixed/fluid/fixed width columns when container is narrowed.

Steps to reproduce

Create page with the following HTML/CSS.

<div class="grid flf">
  <div class="element">Fixed</div>
  <div class="element">Fluid</div>
  <div class="element">Fixed</div>
</div>

.grid {
  background: lightpink;
  display: grid;
  grid-template-rows: 200px;
  margin: 0 auto;
  width: 98vw;
}

.flf {
  grid-template-columns: 200px 1fr 200px;
}

.element {
  background: lightblue;
  color: #000;
  grid-row: 1;
  height: 200px;
  outline: 1px solid black;
  width: 200px;

  &:nth-child(2) {
    margin: auto;
  }
}

Widen, then narrow, the viewport and witness the content not resize with the container.

Demo

See https://codepen.io/evolutionxbox/full/gxyvzB/

rachelandrew commented 7 years ago

I'm confused as to what you are trying to do. What are the auto margins for?

Can you create a reduced test case that clearly demonstrates what you are experiencing? You currently are:

Using Sass
Including autoprefixer which is adding -ms-grid properties
Have multiple examples in one test case

None of these things are going to help you or me. I'll take another look if you can clarify what you actually think the issue is.

evolutionxbox commented 7 years ago

Yep. Indeed I shall.

I posted the other examples to show that the issue does not occur using other variants of fixed unit and fraction units.

As for the SCSS and auto-prefixer, that's a default setting in my code pen. I shall update it and post again to confirm whether the issue is still present.

rachelandrew / gridbugs