absolute positioning with flexbox

Question

I have an element which has visibility: hidden; which takes up space in its parent (expected). I don't want it to take up additional space so I have written position: absolute (suggested by most forums and sites). When I do this, the element wraps to the first position of the parent element, which I am assuming is because the parent has the attribute display: flex; as this seems to be the thing affecting its position. How do I make this flex item behave as normal without taking up space.

I would just change its positioning using top: units; but this looks quite bad when the viewport changes.

full code requested so I've popped it below (apologies for the weird stuff these are templates and statics in Django):

<header>

  {% load static %}
  <div class="header-top-bar header-color">
    <div class="sub-header">

      <div>
        <button onclick="window.location.href = {% url 'index' %}">Home</button>
      </div>

      <div>
        <button onclick="window.location.href = {% url 'about' %}">About</button>
      </div>

      <!-- Some div tags aren't strictly necessary, consider refactoring. -->
      <div>
        <button onclick="window.location.href = {% url 'contact' %}">Contact</button>
      </div>

      <div class="dropdown-menu" onmouseleave="makeInvisible('project-dropdown-list')">

        <button onclick="toggleVisibility('project-dropdown-list')">
          Projects
          <i class="fa fa-caret-down"></i>
        </button>

        <div class="dropdown-list"  id="project-dropdown-list">
          <button>Python</button>
          <button>Bash</button>
          <button>WebDesign</button>
        </div>

      </div>

    </div>


    <div class="sub-header">
      <h1> XXXXXXXXXXXXX| XXXXXXXXXXXXX</h1>
    </div>

    <div class="sub-header">
      <img class="external-site-logo" src="{% static 'index/images/ll-logo.png' %}" alt="image missing.">
      <a src="{% static 'index/images/gh-logo.png' %}" alt="image missing."></a>
      <a><img class="external-site-logo" src="{% static 'index/images/sp-logo.png' %}" alt="image missing."></a>
    </div>
  </div>


  <div class="login-bar header-color">
    <form>
      <label>Username: </label>
      <input type="text">
      <label>Password: </label>
      <input type="password">
      <input type="submit" value="Login">
      <input type="button" value="Sign up" onclick="toggleVisibility('signup-bar')">
    </form>
  </div>

  <div class="header-color" id="signup-bar" onmouseleave="makeInvisibleWithDelay('signup-bar', 3000)">
    <form>
      <label>Re-enter Password: </label>
      <input type="text">
      <input type="submit" value="Create Account">
    </form>
  </div>

</header>

using scss:

header {

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

}

.header-top-bar {

  display: inline-flex;
  justify-content: space-between;
  min-width: 100%;

}

.sub-header {

  display: inline-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-basis: content;

  margin: 0vh 1vw;

}

.dropdown-list {

  position: absolute;
  visibility: hidden;
  font-size: 1.5vw;

  display: flex;
  flex-direction: column;

}

@mixin dropdown-text {
  font-size: 1.5vw;
  min-width: 10vw;
  min-height: 4vh;
  text-align: center;
}

button { @include dropdown-text; }

.external-site-logo {
  max-height: 4vh;
  margin: 1vh 1vw;
}

main {
  display: flex;
  flex-direction: column;
}

@mixin default-text-spacing {
  margin: 0vh 0vw;
  padding: .5vh 1vw;
  max-width: 40vw;
  text-align: center;
  align-self: flex-end;
}

h1 {

  @include default-text-spacing;
  font-size: 2vw;

}

h2 {
  font-size: 5vw;
}

.login-bar {

  align-self: flex-end;

  padding: 1vh .5vw;

  display: inline-flex;
  flex-direction: row;
  justify-content: flex-end;


  label {
    font-size: 1.5vmax;
  }

  * {
    padding: .5vh .5vw;
  }
}

#signup-bar {
  @extend .login-bar;
  visibility: hidden;
}

Answer 1

You can just set the height and padding to 0;

header {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.header-top-bar {
  display: inline-flex;
  justify-content: space-between;
  min-width: 100%;
}

.sub-header {
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-basis: content;
  margin: 0vh 1vw;
}

.dropdown-list {
  position: absolute;
  visibility: hidden;
  font-size: 1.5vw;
  display: flex;
  flex-direction: column;
}

button {
  font-size: 1.5vw;
  min-width: 10vw;
  min-height: 4vh;
  text-align: center;
}

.external-site-logo {
  max-height: 4vh;
  margin: 1vh 1vw;
}

main {
  display: flex;
  flex-direction: column;
}

h1 {
  margin: 0vh 0vw;
  padding: .5vh 1vw;
  max-width: 40vw;
  text-align: center;
  align-self: flex-end;
  font-size: 2vw;
}

h2 {
  font-size: 5vw;
}

.login-bar, #signup-bar {
  align-self: flex-end;
  padding: 1vh .5vw;
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-end;
}
.login-bar label, #signup-bar label {
  font-size: 1.5vmax;
}
.login-bar *, #signup-bar * {
  padding: .5vh .5vw;
}

#signup-bar {
  visibility: hidden;
  height: 0;
  padding: 0;
}

<header>

  {% load static %}
  <div class="header-top-bar header-color">
    <div class="sub-header">

      <div>
        <button onclick="window.location.href = {% url 'index' %}">Home</button>
      </div>

      <div>
        <button onclick="window.location.href = {% url 'about' %}">About</button>
      </div>

      <!-- Some div tags aren't strictly necessary, consider refactoring. -->
      <div>
        <button onclick="window.location.href = {% url 'contact' %}">Contact</button>
      </div>

      <div class="dropdown-menu" onmouseleave="makeInvisible('project-dropdown-list')">

        <button onclick="toggleVisibility('project-dropdown-list')">
          Projects
          <i class="fa fa-caret-down"></i>
        </button>

        <div class="dropdown-list"  id="project-dropdown-list">
          <button>Python</button>
          <button>Bash</button>
          <button>WebDesign</button>
        </div>

      </div>

    </div>


    <div class="sub-header">
      <h1> XXXXXXXXXXXXX| XXXXXXXXXXXXX</h1>
    </div>

    <div class="sub-header">
      <img class="external-site-logo" src="{% static 'index/images/ll-logo.png' %}" alt="image missing.">
      <a src="{% static 'index/images/gh-logo.png' %}" alt="image missing."></a>
      <a><img class="external-site-logo" src="{% static 'index/images/sp-logo.png' %}" alt="image missing."></a>
    </div>
  </div>


  <div class="login-bar header-color">
    <form>
      <label>Username: </label>
      <input type="text">
      <label>Password: </label>
      <input type="password">
      <input type="submit" value="Login">
      <input type="button" value="Sign up" onclick="toggleVisibility('signup-bar')">
    </form>
  </div>

  <div class="header-color" id="signup-bar" onmouseleave="makeInvisibleWithDelay('signup-bar', 3000)">
    <form>
      <label>Re-enter Password: </label>
      <input type="text">
      <input type="submit" value="Create Account">
    </form>
  </div>

</header>