Home:ALL Converter>flex-grow bug in Chrome?

flex-grow bug in Chrome?

Ask Time:2021-09-22T05:57:12         Author:GaryBishop

Json Formatter

If I decrease the value of flex-grow after increasing it, Chrome will make the item bigger instead of smaller.

You can see an example page at https://gb.cs.unc.edu/~gb/tmp/bug.html. I'll also include the code below.

I've added Javascript to increment and decrement flex-grow on jsbin https://output.jsbin.com/puqolal/3

If you open devtools on that page, and increase the value of flex-grow on the div.choose-one the buttons will grow. But when you decrease the value, they keep growing. It doesn't seem possible to reset back to the original state.

I'm, of course, adjusting the value from Javascript not devtools but I'm trying to minimize the code involved.

It renders as I would expect on Firefox. I have reported this as a potential Chrome bug but I'd love to find a work around until they fix it.

I'm using Chrome Version 93.0.4577.82 (Official Build) (64-bit) on Ubuntu 20.04.3 LTS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Flex bug?</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        height: 100vh;
        width: 100vw;
      }
      div.choose-one {
        display: flex;
        flex-grow: 1;
      }
      div.hstack {
        display: flex;
        flex: 1;
        height: 100%;
      }
      div.vstack {
        display: flex;
        flex: 1;
        width: 100%;
        flex-direction: column;
      }
      fieldset {
        display: flex;
        flex: 1;
      }
      button {
        flex: 1;
      }
    </style>
  </head>
  <body>
    <div class="hstack">
      <div class="vstack">
        <div class="choose-one" style="flex-grow: 1">
          <fieldset>
            <button>Me</button>
          </fieldset>
        </div>
        <div class="choose-one">
          <fieldset>
            <button>Present</button>
          </fieldset>
        </div>
      </div>
    </div>
  </body>
</html>

Author:GaryBishop,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/69275969/flex-grow-bug-in-chrome
yy