css transition border is contained except for fixe

Question

For learning purposes, I have been playing with different css transition effects. I cannot, however, figure this bit out.

A simple setup: top nav with a toggle icon to display a sidebar <aside>. Sidebar items are wrapped in a <div id='swap'>. One of the sidebar items needs to be at the bottom and I have set its position to fixed. Here is the jquery:

(function() {
  $(".toggle-wrap").on("click", function() {
    $("i").toggleClass("fa-bars fa-times");
    $("main").toggleClass("main push");
    $("aside").animate({ width: "toggle" }, 200);
    $("#swap").toggleClass("hidden shown");
  });
})();

The click swiftly moves the main content to the right and makes the <aside> itself visible and then makes the sidebar items visible via a transition (cubic-bezier(0.32, 1.25, 0.375, 1.15))

The trouble: the cubic-bezier makes a "playful" entrance but it overflows only for the fixed item at the bottom and the overflow:hidden does not seem to have any effect. After the transition, it is perfectly in place. Here is a screenshot:

My question: How can I contain the border/prevent this overflow with the fixed position?

I have made a codepen to have the entire code available.

Answer 1

I used flexboxes and added a few wrapper classes. Let me know if you have any questions.

(function() {
  $(".toggle-wrap").on("click", function() {
    $("i").toggleClass("fa-bars fa-times");
    $(".aside").animate({
      width: "toggle"
    }, 200);
    $(".lower").toggleClass("hidden shown");
    $(".upper").toggleClass("hidden shown");
  });
})();

html,
body,
.site-wrapper {
  height: 100%;
  font: normal 1em "Arial";
  background: #212121;
  color: #fff;
}

.site-wrapper {
  display: flex;
  flex-direction: column;
}

nav {
  padding: 10px;
  background: yellow;
  color: #000;
}

.toggle-wrap {
  padding: 10px;
  cursor: pointer;
  /*disable selection*/
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.content-wrapper {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

.aside {
  background: #383838;
  display: none;
  overflow: hidden;
}

.aside-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 30vw;
}

.upper,
.lower {
  display: flex;
  flex-direction: column;
  transition: all 1950ms cubic-bezier(0.32, 1.25, 0.375, 1.15);
  transition-delay: 300ms;
  width: 30vw;
}

.upper {
  flex-grow: 1;
}

.lower {
  border-top: 2px solid yellow;
}

a {
  padding: 12px 18px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  border-bottom: 1px solid yellow;
}

.hidden {
  margin-left: -100%;
}

.shown {
  transition: all 1950ms cubic-bezier(0.32, 1.25, 0.375, 1.15);
  transition-delay: 300ms;
  margin-left: 0;
}

.main {
  padding: 2em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="site-wrapper">
  <nav>
    <div class="toggle-wrap">
      <i class="fa fa-bars"></i>
    </div>
  </nav>
  <div class="content-wrapper">
    <aside class="aside">
      <div class="aside-content">
        <div class="upper hidden">
          <a href="#">BRAND</a>
          <a href="#">another item</a>
        </div>
        <div class="lower hidden">
          <a href="#">Menu</a>
        </div>
      </div>
    </aside>
    <main class='main'>
      CONTENT
    </main>
  </div>
</div>

EDIT: Added border to top of .upper

Answer 2

When using position:fixed the element will be positioned relative to the viewport and thus the overflow of its parent container won't work.

To fix this simply switch to position:absolute and your element will be positioned relative to the nearest positioned ancestor and in your case it's the aside element and the overflow:hidden of this element will hide your overflowing border.

---

And why both values of position give the same result?

Simply because in your case, you applied only bottom:0 and since your aside is taking full height of the screen, bottom:0 will refer to same position which is the bottom of the screen. You may adjust slightly the height of aside and you will notice the difference between fixed and absolute in this case.