CODEWITHSUNDEEP
htmlcssflexbox
gameboynintendocolor
gameboynintendocolor

Reputation: 35

Keep flex items fixed while resizing window

I am working on a web app and I need help with css. I am a beginner at css so please bear with me.

I'm trying to style a fixed sidebar for an app. The sidebar occupies the full height of the browser window. The whole sidebar is a flex box and the flex children are nested flex boxes as well.

Presently, the flex children move along with the browser window while reducing the viewport height and so the menu links get pushed up (but the avatar and username element remain fixed?!).

I don't want this to happen. The menu items inside the parent container should get clipped (instead of moving along with the browser window) and the user can scroll down to view the remaining menu items (like the sidebar on the youtube website for example).

For easy reference, here is the imgur link of what is current result and what I actually want: https://i.sstatic.net/WG7XE.jpg

Also, the scroll bar seems to take up extra width while appearing. Is there any way to stop that behavior?

https://jsfiddle.net/qbw1aLyz/8/

html {
  background-color: #141E30;
  margin: 0;
  padding: 0;
}

.sidebar {
  display: flex;
  flex-direction: column;
  width: 300px;
  top: 0;
  bottom: 0;
  position: fixed;
  overflow: auto;
  background: #0a0c0f;
  color: #EAE9E9;
}

.sidebar__profile {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sidebar__menuitem {
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 30px;
}

.count {
  margin-left: auto;
  margin-right: 20px;
  border-radius: 6px;
  padding: 2px 5px;
  background-color: #EAE9E9;
  color: #0a0c0f;
}
<div class="sidebar">
  <div class="sidebar__profile">
    <img src="http://chittagongit.com//images/avatar-icon/avatar-icon-4.jpg" height=50px alt="image" class="sidebar__profile__avatar" />
    <div class="sidebar__profile__name">User Name</div>
  </div>
  <div class="sidebar__menuitem">
    <div>Menu Item 1</div>
    <div class="count">2</div>
  </div>
  <div class="sidebar__menuitem">
    <div>Menu Item 2</div>
    <div class="count">2</div>
  </div>
  <div class="sidebar__menuitem">
    <div>Menu Item 3</div>
    <div class="count">2</div>
  </div>
  <div class="sidebar__menuitem">
    <div>Menu Item 4</div>
    <div class="count">2</div>
  </div>
  <div class="sidebar__menuitem">
    <div>Menu Item 5</div>
    <div class="count">2</div>
  </div>
  <div class="sidebar__menuitem">
    <div>Menu Item 6</div>
    <div class="count">2</div>
  </div>
  <div class="sidebar__menuitem">
    <div>Menu Item 7</div>
    <div class="count">2</div>
  </div>
</div>

Upvotes: 1

Views: 3601

Answers (2)

Fabian Hijlkema
Fabian Hijlkema

Reputation: 391

Just wrap .sidebar__profile in another div so it can act as a block-element rather than a shrinking flex-element...

html {
  background-color: #141E30;
  margin: 0;
  padding: 0;
}

.sidebar {
  display: flex;
  flex-direction: column;
  width: 300px;
  top: 0;
  bottom: 0;
  position: fixed;
  overflow: auto;
  background: #0a0c0f;
  color: #EAE9E9;
}

.sidebar__profile {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sidebar__menuitem {
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 30px;
}

.count {
  margin-left: auto;
  margin-right: 20px;
  border-radius: 6px;
  padding: 2px 5px;
  background-color: #EAE9E9;
  color: #0a0c0f;
}
<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>title</title>
  </head>

  <body>
    <div class="sidebar">
      <div>
        <div class="sidebar__profile">
          <img src="http://chittagongit.com//images/avatar-icon/avatar-icon-4.jpg" height=50px alt="image" class="sidebar__profile__avatar" />
          <div class="sidebar__profile__name">User Name</div>
        </div>
      </div>
      <div class="sidebar__menuitem">
        <div>Menu Item 1</div>
        <div class="count">2</div>
      </div>
      <div class="sidebar__menuitem">
        <div>Menu Item 2</div>
        <div class="count">2</div>
      </div>
      <div class="sidebar__menuitem">
        <div>Menu Item 3</div>
        <div class="count">2</div>
      </div>
      <div class="sidebar__menuitem">
        <div>Menu Item 4</div>
        <div class="count">2</div>
      </div>
      <div class="sidebar__menuitem">
        <div>Menu Item 5</div>
        <div class="count">2</div>
      </div>
      <div class="sidebar__menuitem">
        <div>Menu Item 6</div>
        <div class="count">2</div>
      </div>
      <div class="sidebar__menuitem">
        <div>Menu Item 7</div>
        <div class="count">2</div>
      </div>
    </div>
  </body>

</html>

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 371629

Try wrapping the menu items in their own container, giving that container a scrolling function, and disabling shrinking on the profile.

Add this to your code:

nav {
  overflow: auto;
}
.sidebar__profile {
  align-self: center;
  flex-shrink: 0;
}

revised jsfiddle demo

Upvotes: 0

Related Questions