自动显示滚动条的问题？

我想要的效果是右边内容长了显示滚动条，可调来调去就是不行：

#app {
    height: 100%;
}
.app-wrapper[data-v-82b7485c] {
    position: relative;
    height: 100%;
    width: 100%;
}

#app .sidebar-container {
    transition: width 0.28s;
    width: 210px !important;
    background-color: #304156;
    height: 100%;
    position: fixed;
    font-size: 0px;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    overflow: hidden;
}
#app .main-container {
    min-height: 100%;
    transition: margin-left 0.28s;
    margin-left: 210px;
    position: relative;
    overflow-y: auto;
}

阅读 1.8k

你知道大家为何都不帮你么？
因为你犯了程序员大忌，提问题不贴全代码，给个截图，找骂！
大家快来吐槽他！让他长点记性！
<>吐槽一波</>
1.你只贴个css代码，html代码都不贴，你还想让我们能帮忙？
2.你要是会提问题你就专业点，把最小复现html+css直接贴上来
3.大家时间都很忙，还要把你的截图自己在配合你上面的css创建一个html，很浪费时间的
4.以后注意点，提问题把你的最小复现代码全部贴上来，方便别人回答
你会提个鸡脖！
我是实在看不惯，才给你回答的
你太气人了
。。。
下面代码直接在你电脑上创建一个html，把代码贴进去，然后，用浏览器打开此html，即能看到效果！
效果图：

代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
html,body {
    padding: 0;
    height: 100%;
    width: 100%;
    margin: 0;
}
#app {
    height: 100%;
}
.app-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    height: 40px;
    width: 100%;
    background-color: burlywood;
    display: flex;
    z-index: 1;
}

#app .sidebar-container {
    transition: width 0.28s;
    width: 210px !important;
    background-color: #304156;
    height: 100%;
    position: fixed;
    font-size: 0px;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}
#app .main-container {
    min-height: 100%;
    transition: margin-left 0.28s;
    margin-left: 210px;
    position: relative;
    overflow: auto;
    margin-top: 40px;
}
.head-l {
    margin-left: 210px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sidebar-li {
    font-size: 16px;
}
</style>
<body>
    <div id="app">
        <div class="app-wrapper">
            <div class="head-l">
                <div>这TM是头部</div>
            </div>
        </div>
        <div class="sidebar-container">
            <ul>
                <li class="sidebar-li">侧边栏</li>
                <li class="sidebar-li">我Tm来了</li>
                <li class="sidebar-li">我Tm又来了</li>
                <li class="sidebar-li">我Tm又来了</li>
                <li class="sidebar-li">我Tm又来了</li>
            </ul>
        </div>
        <div class="main-container">
            <p>吐槽一波</p>
            <p>1.你只贴个css代码，html代码都不贴，你还想让我们能帮忙？</p>
            <p>2.你要是会提问题你就专业点，把最小复现html+css直接贴上来</p>
            <p>3.大家时间都很忙，还要把你的截图自己在配合你上面的css创建一个html，很浪费时间的</p>
            <p>4.以后注意点，提问题把你的最小复现代码全部贴上来，方便别人回答</p>
            <p>你会提个鸡脖！</p>
            <p>我是实在看不惯，才给你回答的</p>
            <p>你太气人了</p>
            <p>。。。</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
            <p>大家快来吐槽他！这家伙不会提问题</p>
        </div>
    </div>
</body>
</html>

大家快来吐槽他！

自动显示滚动条的问题？

你尚未登录，登录后可以

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

如何在CSS中实现滚动条不溢出圆角框？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

如何在Ant Design表格中同时设置scroll.x和scroll.y且表头不换行？

表数据复制一条添加到数据库，前端跳转到数据所在的page页，滚动到对应行并添加高亮样式异常？