Contenteditable doesn't work for span element in firefox

Hi I'm currently working on implementing a custom input directive for our web application. Now my input element is constructed like this:

<div class="variable-input-container" style="width: 100%;">
  <div class="var-input" tabindex="0">
    <span class="var-input-span" contenteditable="true"></span>
  </div>
  <!-- Additional Elements here -->
</div>

The following css classes are used:

.variable-input-container {
    display: flex;
    flex-direction: row;
    position: relative;
}
.var-input {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    font-size: 14px;
    height: 34px;
    border: 1px solid #cfcfcf;
    padding: 6px 12px;
    padding-left: 14px;
}
.var-input:hover {
    cursor: text;
}
.var-input-span {
    outline: none;
}

My problem is now that this works totally fine in Chrome and behaves like a normal input element (It just automatically adds a child span element that contains the added text.). But if I open the app in Firefox however I can't write in the element. I can still select it but my cursor won't show up.

I have a case however where I add additional span elements as children to the "main" span element to display some variables in a different color and with a popup element. If one of these elements is added I also can write in the inputfield again.

Has anyone ever encountered something like this?

EDIT:

Based on CBroes answer I adjusted my css so that my span element fills out the whole field regardless of the content.

Adjusted var-input and var-input-span classes:

.var-input {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    font-size: 14px;
    height: 34px;
    border: 1px solid #cfcfcf;
}
.var-input-span {
    padding: 6px 12px;
    padding-left: 14px;
    width: 100%;
    display: inline-block;
    outline: none;
}

in Chrome I can still click into the div (next to the span element) and it focuses the span element

Nice coincidence that works in your favor here, but unless that is specified somewhere, not a thing I would rely on.

I would recommend that you either fill the span initially with a couple of   to give the user something to click "on", or specify a min-width. If you can't have a min-width when it is actually getting edited, maybe apply it via span:not(:focus) only.

Writing some JS code that detects the click on the div container, and then sets the focus on the editable span, might also be another alternative option.