Vertical gap between flex items

Question

When I wrap my inserted SVG's in a new line; I get a small gap between the squares and the crosses, which I do not want.

I have no idea where it comes from, because my line-breaks should have no height. If I align the elements next to each other horizontally, they have no gap between.

For testing, you can only add a square at the beginning, and only squares after crosses and crosses after squares. To insert squares and crosses, just press the corrresponding buttons. Edit: The "Transition" button is not used yet.

addSquare = function () {
  if (lastBlock != "square") {
    var svgSquare = document.createElementNS(svgns, "svg");
    var rect = document.createElementNS(svgns, "rect");

    svgSquare.setAttribute("aria-hidden", "true");
    svgSquare.setAttribute("viewbox", "0 0 100 100");
    svgSquare.setAttribute("width", "50px");
    svgSquare.setAttribute("height", "50px");

    rect.setAttribute("x", 1);
    rect.setAttribute("y", 1);
    rect.setAttribute("width", 49);
    rect.setAttribute("height", 49);
    rect.setAttribute("stroke", "#000");
    rect.setAttribute("fill", "none");
    rect.setAttribute("shape-rendering", "crispEdges");

    var data = document.createTextNode(stepNum);
    stepNum += 1;
    var text = document.createElementNS(svgns, "text");
    text.setAttributeNS(null, "x", "25");
    text.setAttributeNS(null, "y", "13");
    text.setAttributeNS(null, "fill", "green");
    text.setAttributeNS(null, "text-anchor", "middle");

    text.appendChild(data);
    svgSquare.appendChild(text);
    svgSquare.appendChild(rect);

    document.getElementById("grafcet").appendChild(svgSquare);
    lastBlock = "square";
    
    var lineBreak = document.createElement("hr");
    lineBreak.setAttribute("class","line-break");
    document.getElementById("grafcet").appendChild(lineBreak);
  } else {
    return;
  }
};

addCross = function () {
  if (lastBlock != "cross") {
    var svgCross = document.createElementNS(svgns, "svg");
    var path1 = document.createElementNS(svgns, "path");
    var path2 = document.createElementNS(svgns, "path");

    svgCross.setAttribute("aria-hidden", "true");
    svgCross.setAttribute("viewbox", "0 0 100 100");
    svgCross.setAttribute("width", "50px");
    svgCross.setAttribute("height", "50px");

    path1.setAttribute("d", "M 25,0 V 50");
    path1.setAttribute("stroke", "black");
    path1.setAttribute("stroke-width", "1");
    path1.setAttribute("stroke-opacity", "1");
    path1.setAttribute("shape-rendering", "crispEdges");

    path2.setAttribute("d", "M 0,25 H 50");
    path2.setAttribute("stroke", "black");
    path2.setAttribute("stroke-width", "1");
    path2.setAttribute("stroke-opacity", "1");
    path2.setAttribute("shape-rendering", "crispEdges");

    svgCross.appendChild(path1);
    svgCross.appendChild(path2);
    document.getElementById("grafcet").appendChild(svgCross);
    lastBlock = "cross";
    
    var lineBreak = document.createElement("hr");
    lineBreak.setAttribute("class","line-break");
    document.getElementById("grafcet").appendChild(lineBreak);
  } else {
    return;
  }
};
var lastBlock = "cross";
var stepNum = 0;
const svgns = "http://www.w3.org/2000/svg";

body {
  font-family: monospace;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
hr {
  flex-basis: 100%;
  height: 0;
  margin: 0;
  border: 0;
}
.button {
  margin: 10px 10px 10px 0px;
}

<h1 id="title">Grafcet</h1>
<hr class="line-break"></hr>
<header>
  <button class="button" onclick="addSquare()">
    Add Square
  </button>
  <button class="button" onclick="addCross()">
    Add Cross
  </button>
  <button class="button" onclick="addTransition()">
    Add Transition
  </button>
</header>
<hr class="line-break"></hr>
<div id="grafcet"></div>