1

I just noticed a weird bug when I upgraded from Chrome 64 to 65. The behaviour of a flex styled div suddenly changed.

I have a div styled like so:

.modal-add-branch .modal-body .modal-pill-row .search-col {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
<div class="modal-pill-row with-search row">
    <div class="col-xs-9"></h3></div>
    <div class="search-col col-xs-3">
        <span class="search pull-right input-group">
          <input type="text" placeholder="Search" value="" class="form-control">
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-search"></span>
          </span>
        </span>
    </div>
</div>

It is supposed to look like this (and it did, before Chrome 65):

enter image description here

But after upgrading to Chrome 65, it suddenly overflows the modal container and looks like this:

enter image description here

I'm pretty sure that upgrades aren't supposed to retroactively break features. Could someone on the Chrome team help me understand what's happening here?

TylerH
  • 20,799
  • 66
  • 75
  • 101
nikjohn
  • 20,026
  • 14
  • 50
  • 86
  • 1
    It's hard to tell without being able to reproduce the problem. Have you tried [**`margin-left: auto`**](https://stackoverflow.com/a/33856609/3597276) (or `-right`) on the flex item? Maybe that will pin it into place in both versions. – Michael Benjamin Mar 19 '18 at 23:19
  • 1
    "I'm pretty sure that upgrades aren't supposed to retroactively break features." Hahahahahahahaha that's Chrome for you. I've been tracking similar regressions (that's what they're called) on and off since **version 40** of Chrome. Just about every single major release of Chrome breaks a completely random feature for no rhyme or reason - it's like the Chrome team is doing that on purpose just to keep us on our toes. On the bright side, assuming this isn't down to a spec change, this'll probably go away by version 66. – BoltClock Mar 20 '18 at 00:28
  • @nikjohn did you forget to include some tags? You have a closing `h3` tag but no opening one. – TylerH Mar 20 '18 at 13:47
  • Also, are you using Bootstrap? You have bootstrap classes but no link to the framework. Finally, your code isn't quite a *reproduction* of what you're showing; in Chrome 65 your demo still just has a search bar on the left and nothing else. Maybe adding bootstrap will help? – TylerH Mar 20 '18 at 13:49

0 Answers0