CSS flex space-between issue

Question

I have a unique problem where I want the link elements inside a div to use flex space-between BUT these links open up modal layers and the modal div is actually within the parent div. Now just having this empty div in the #parent div is causing additional spacing. How can I resolve this? By the way... I cannot reorganize the markup... the modal divs have to be within the parent div.

So something like this:

 #parent { display: flex; flex-direction: row; justify-content: space-between; } #parent a { max-width: 46px; margin: 0 1%; }

 <div id="parent"> <a href="#" id="modal1link">LINK 1</a> <a href="#" id="modal2link">LINK 2</a> <a href="#" id="modal3link">LINK 3</a> <div id="modal1" class="modal"></div> <div id="modal2" class="modal"></div> <div id="modal3" class="modal"></div> </div>

Answer 1

I presume the modals will be full screen & hidden by default? If so:

.modal {
    position: fixed;
    display: none;
  }