正文区域overflow，滚动时会连着左侧sidebar也一起滚动，只需要main-body区域滚动，怎么改？谢谢

Question

如图，右下正文区域需要滚动，滚动时会连着左侧sidebar也一起滚动，只需要main-body区域滚动，要怎么改，要死人了。

下面我的html

<div className="main-view">
                <div className="main-sidebar">
                    <sidebar>
                        <div className="sidebar-wrapper">
                            <div className="sidebar">
                                <div className="logo">
                                    <img src={jiChu} className="logoPic" />
                                </div>
                                <div className="sidebar-nav">
                                    {sidebars}
                                </div>
                                <div className="sidebar-footer">
                                    <span><Icon type="double-left" /><span>  </span></span>
                                </div>
                            </div>
                        </div>
                    </sidebar>
                </div>
                <div className="main-wrapper">
                    <div className="main-nav-bar">
                        <div className="navbar">
                            {headerUserPanel}
                        </div>
                    </div>
                    <div className="Breadcrumb">
                        {Breadcrum}
                    </div>
                    <div className="main-body">
                        <div className="main-content">
                            <div id="create">
                                {this.props.children}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

css:

html,body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /*font-family: "Helvetica Neue","Hiragino Sans GB",Arial,"微软雅黑",sans-serif;*/
    font-family: "Alright Sans LP","Avenir Next","Helvetica Neue",Helvetica,Arial,"PingFang SC","Source Han Sans SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi MicroHei",sans-serif;
    font-size: 14px;
    line-height: 1.42857;
    color: #333;
}
*, :after, :before {
    box-sizing: border-box;
}

/*页面*/
body .main-view{
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
}

/*左侧*/
body .main-view .main-sidebar{
    flex-shrink: 0;
    height: inherit;
    /*font-size: 16px;*/
}

.sidebar,.sidebar-wrapper{
    position: absolute;
    height: 100%;
    display: -ms-flexbox;
    display: flex;
}
.sidebar, .sidebar-wrapper {
    position: absolute;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.sidebar{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 230px;
    background-color: #f5f7fa;
    box-shadow: inset -1px 0 0 #e1e4eb;
    -webkit-transition: all .15s;
    transition: all .15s;
}

.sidebar-wrapper .logo{
    line-height: 120px;
    text-align: center;
}
.logoPic{
    position: relative;
    top: 24px;
    left: 82px;
    width: 50px;
    cursor: pointer;
}
.sidebar-wrapper .sidebar-nav{
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.sidebar-wrapper .sidebar-footer{
    border-top: 1px solid #e2e5ea;
    padding: 10px 24px;
    color: #999;
    cursor: pointer;
}


/*右侧*/
body .main-view .main-wrapper{
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-left: 230px;
}
.main-nav-bar{
    height: 68px;
    -ms-flex-preferred-size: 68px;
    flex-basis: 68px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}
.navbar{
    margin-bottom: 0;
    border-bottom: 1px solid #dcdfe5;
    min-height: 68px;
}
body .main-view .main-wrapper .main-body{
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    height: 100%;
    overflow: auto;
}
body .main-view .main-wrapper .main-content{
    position: relative;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-box-flex: 2;
    -ms-flex-positive: 2;
    flex-grow: 2;
    overflow: auto;
}
#create{
    padding: 50px 45px;
}

请问该如何改，谢谢

Answer 1

如果可以的话 把右下那块放入frame里面就行