Why does setting the element display property to flex in CSS change the behaviour of the JS onclick event with 'event.target'?

let button = document.querySelector('.smash');
let input = document.querySelector('.userinput');
let ul = document.querySelector('.list');
let listItems = document.querySelectorAll('.list > li');

function inputLengthValue() {
  let result = input.value.length;
  return result;
}

function createListElem() {
  let li = document.createElement('li');
  li.appendChild(document.createTextNode(input.value));
  li.classList.add('item');
  ul.appendChild(li);
  input.value = "";

  let delButton = document.createElement('button');
  delButton.appendChild(document.createTextNode('Delete item'));
  li.appendChild(delButton);
  delButton.addEventListener('click', removeItem)
}

function addListItemOnclick() {
  if (inputLengthValue() != 0) {
    createListElem();
  }
}

function addListItemOnEnterPress(event) {
  if (inputLengthValue() != 0 && event.keyCode === 13) {
    createListElem();
  }
}

function createDeleteButtons() {
  for (let i = 0; i < listItems.length; i++) {
    let delButton = document.createElement('button');
    delButton.appendChild(document.createTextNode('Delete item'));
    listItems[i].appendChild(delButton);
    delButton.addEventListener('click', removeItem);
  }
}

function markAsDone(event) {
  let target = event.target;
  target.classList.toggle('done');
}

function removeItem(event) {
  let target = event.target;
  target.parentNode.remove();
}


button.addEventListener('click', addListItemOnclick);
input.addEventListener('keydown', addListItemOnEnterPress);
ul.addEventListener('click', markAsDone);
createDeleteButtons(); // create delete btn for default items

.done {
  text-decoration: line-through;
}

.item {
  display: flex;
  justify-content: space-between;
  max-width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="title">Some list</h1>
<input type="text" placeholder="enter your text" class="userinput">
<button class="smash">Add item</button>
<ul class="list">
  <li class="item"><span>Romboid</span></li>
  <li class="item"><span>Square</span></li>
  <li class="item"><span>Circle</span></li>
  <li class="item"><span>Ellipse</span></li>
  <li class="item"><span>Rectangle</span></li>
  <li class="item"><span>Oval</span></li>
</ul>