调整窗口大小时保持弹性项目固定 [英] Keep flex items fixed while resizing window
问题描述
我正在开发一个网络应用程序,我需要 css 方面的帮助.我是 css 初学者,请多多包涵.
我正在尝试为应用设置固定侧边栏的样式.侧边栏占据浏览器窗口的整个高度.整个侧边栏是一个 flex 框,并且 flex 子项也是嵌套的 flex 框.
目前,flex 子元素随着浏览器窗口移动,同时降低视口高度,因此菜单链接被向上推(但头像和用户名元素保持固定?!).
我不希望这种情况发生.父容器内的菜单项应该被剪切(而不是随着浏览器窗口移动),用户可以向下滚动以查看剩余的菜单项(例如 youtube 网站上的侧边栏).
为了便于参考,这里是当前结果和我真正想要的 imgur 链接:https://imgur.com/a/VShsF6o
此外,滚动条在出现时似乎占据了额外的宽度.有没有办法阻止这种行为?
https://jsfiddle.net/qbw1aLyz/8/
html {背景颜色:#141E30;边距:0;填充:0;}.侧边栏{显示:弹性;弹性方向:列;宽度:300px;顶部:0;底部:0;位置:固定;溢出:自动;背景:#0a0c0f;颜色:#EAE9E9;}.sidebar__profile {填充:16px;显示:弹性;弹性方向:列;对齐项目:居中;}.sidebar__menuitem {填充底部:10px;显示:弹性;对齐项目:居中;弹性收缩:0;高度:30px;}.数数 {左边距:自动;右边距:20px;边框半径:6px;填充:2px 5px;背景颜色:#EAE9E9;颜色:#0a0c0f;}
<div class="sidebar__menuitem"><div>菜单项 1</div><div class="count">2</div>
<div class="sidebar__menuitem"><div>菜单项 2</div><div class="count">2</div>
<div class="sidebar__menuitem"><div>菜单项 3</div><div class="count">2</div>
<div class="sidebar__menuitem"><div>菜单项 4</div><div class="count">2</div>
<div class="sidebar__menuitem"><div>菜单项 5</div><div class="count">2</div>
<div class="sidebar__menuitem"><div>菜单项 6</div><div class="count">2</div>