Эта скорее всего, связана с тем, что свойство display: flex заставляет элемент формы стать flex container, что означает, что его дочерние элементы будут рассматриваться как flex items. В результате div с атрибутом contentEditable занимает всю ширину контейнера и становится кликабельным.
Одним из решений этой проблемы может быть задание div с атрибутом contentEditable определенной ширины, чтобы он занимал только то пространство, которое ему необходимо. Кроме того, можешь установить свойство display div в inline-block, чтобы он не занимал всю ширину контейнера.
Еще можно обернуть в div и установить в качестве flex-элемента вместо элемента формы. Таким образом, на div не будут влиять flex-свойства элемента формы.
Также можешь добавить свойство pointer-events: none к родительскому элементу, чтобы сделать его не реагирующим на щелчки, это сделает дочерний элемент реагирующим на щелчки.
В общем, есть несколько различных способов решения этой проблемы, но главное убедиться, что div с атрибутом contentEditable занимает только необходимое ему пространство, а не всю ширину контейнера.