在调整窗口大小时保持弹性项目固定答案

【问题标题】：Keep flex items fixed while resizing window在调整窗口大小时保持弹性项目固定
【发布时间】：2019-06-28 12:58:04
【问题描述】：

我正在开发一个网络应用程序，我需要有关 CSS 的帮助。我是css初学者，请多多包涵。

我正在尝试为应用设置固定侧边栏的样式。侧边栏占据了浏览器窗口的整个高度。整个侧边栏是一个弹性盒子，弹性子元素也是嵌套的弹性盒子。

目前，flex 子项随着浏览器窗口移动，同时降低视口高度，因此菜单链接被向上推（但头像和用户名元素保持固定？！）。

我不希望这种情况发生。父容器内的菜单项应该被剪裁（而不是随着浏览器窗口移动），并且用户可以向下滚动以查看剩余的菜单项（例如 youtube 网站上的侧边栏）。

为了方便参考，这里是当前结果和我真正想要的 imgur 链接：https://imgur.com/a/VShsF6o

此外，滚动条在出现时似乎占用了额外的宽度。有没有办法阻止这种行为？

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>

【问题讨论】：

我实际上无法重现该问题。我看到菜单项在 Firefox/Chrome 中被剪掉了。

标签： html css flexbox

【解决方案1】：

只需将 .sidebar__profile 包装在另一个 div 中，这样它就可以充当块元素而不是缩小的弹性元素...

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>

【讨论】：

非常感谢！两个答案都有效。你能告诉我如何避免滚动条偏移侧边栏右侧附近的数字吗？

【解决方案2】：

尝试将菜单项包装在它们自己的容器中，为该容器提供滚动功能，并在配置文件上禁用收缩。

将此添加到您的代码中：

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

revised jsfiddle demo

【讨论】：

非常感谢！两个答案都有效。您能否介绍一下如何避免滚动条偏移侧边栏右侧附近的数字？
@gameboynintendocolor 因为你使用的是固定宽度，你可以试试这个：jsfiddle.net/qkvenxzb