Why does my contenteditable="true" get activated even though I click somewhere else?

Question

Here is my code:

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.button {
  padding: 5px;
  background-color: rgb(200, 200, 200);
}

<div class="buttons">

  <div class="button">
    One
  </div>

  <div class="button">
    Two
  </div>

  <div class="button" tabindex="0" contenteditable="true" spellcheck="false">
    Three
  </div>

</div>

Now, if I click on the right side of the third button, not on the button anymore, just somewhere in the space on the right side, then still the third button gets activated. Why? This is so weird!

It happens only once!

And it helps to use inline-flex instead, but I need flex, and then it still happens if I click in the little space on the left side of the button to the next one.

Answer 1

Very Simple Workaround

As @RokoC.Buljan noted in a comment, the problem appears to be a Chromium bug.

The simple workaround is to add a <wpr> tag after the last button. This Line Break Opportunity is essentially an empty element. Yet, you could also use a   non-breaking space entity, which works equally well.

Test Snippet

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.button {
  padding: 5px;
  background-color: rgb(200, 200, 200);
}

<h4>1. Original without workaround</h4>
<div class="buttons">
  <div class="button">
    One
  </div>
  <div class="button">
    Two
  </div>
  <div class="button" tabindex="0" contenteditable="true" spellcheck="false">
    Three
  </div>
</div>

<h4>2. Using a word-break opportunity tag</h4>
<div class="buttons">
  <div class="button">
    One
  </div>
  <div class="button">
    Two
  </div>
  <div class="button" tabindex="0" contenteditable="true" spellcheck="false">
    Three
  </div>
  <wbr>
</div>

<h4>3. Using a non-breaking space entity</h4>
<div class="buttons">
  <div class="button">
    One
  </div>
  <div class="button">
    Two
  </div>
  <div class="button" tabindex="0" contenteditable="true" spellcheck="false">
    Three
  </div>
  &nbsp;
</div>