webf icon indicating copy to clipboard operation
webf copied to clipboard

flex grow shrink basis behaviour incorrect

Open bainian opened this issue 2 years ago • 0 comments

Affected version

main

No same issues found.

  • [X] Yes, I search all issues but not found.

Steps to Reproduce

see code.

Code example


<style type="text/css">
  .wrapper {
    display: flex;
    border: 2px solid blue;
  }
  .item1 {
  background: lightsalmon;
  }
  .item2 {
  background: hotpink;
  }
  .item3 {
  background: lightgreen;
  }
  .item1,
  .item2,
  .item3 {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
  }

</style>
<body>
  <div class="wrapper">
    <div class="item1">1111111111111111111111111111111111111111</div>
    <div class="item2">22</div>
    <div class="item3">333333333333333</div>
  </div>
</body>

Expected results

image

Actual results

image

bainian avatar Nov 24 '22 17:11 bainian