'Keyboard selection issue with contenteditable

I'm seeing an issue where if you try to select contenteditable divs you can only select n-1 rows using keyboard navigation. This happens in safari and chrome so it doesn't seem like a browser bug. It's unclear why the red div to the right in the codepen below would prevent the last element from being selected.

To repro: put the cursor in the first position (in front of the "one") then hold shift and navigate down to select the rows below - note it stops without selecting "three"

<html>
  <body>
    <div contenteditable="true">
      <div style="display: flex">
        <div>
          <div contenteditable="true">one</div>
          <div contenteditable="true">two</div>
          <div contenteditable="true">three</div>
        </div>
        <div contenteditable="false" style="width: 10px; background: red">
          <div></div>
        </div>
      </div>
    </div>
  </body>
</html>

Error screenshot

htmlcontenteditable


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions