html - Flexbox 侧边栏阻止主要内容在小屏幕上环绕在侧边栏下

Question

我有一个包含主要内容的侧边栏，效果很好...问题是对于主要内容，我使用的是 Bootstrap 类 .container。

当前行为

当我缩小页面时，主要内容会弹出到侧边栏下方。

期望的行为

我希望 .container 缩小，以便侧边栏和主要内容适合屏幕。

我的代码

https://jsfiddle.net/4jm70ton/

标记:

<!-- site footer -->
<div class="footer">
    <div class="footer-group footer-group-left">
        <span>
            Slide 1/10
        </span>
        <span>
            <i class="fa fa-user"></i>
            &nbsp; 2 users connected
        </span>
    </div>
    <div class="footer-group footer-group-center">
        <a href="#">
            <i class="fa fa-arrow-left"></i>
        </a>
        <a href="#">
            <i class="fa fa-arrow-right"></i>
        </a>
    </div>
    <div class="footer-group footer-group-right">
        <a class="text-success" href="#">
            <i class="fa fa-check"></i>
        </a>
        <a class="text-danger" href="#">
            <i class="fa fa-times"></i>
        </a>
        <span>
            00:00
        </span>
    </div>
</div>
<!-- end site footer -->

CSS

body {
    background: #fafafa;
    box-shadow: 0 0 5rem rgba(0, 0, 0, 0.25) inset;
    display: flex;
    flex-wrap: wrap;
    min-height: 100vh;
    margin: 0;
    overflow-x:hidden;
}

/* chatbox */
.chatbox {
    background: white;
    display: flex;
    flex: 0 0 300px;
    flex-direction: column;
    height: calc(100vh - 60px);
    margin-left:-300px;

    -webkit-box-shadow: 0px 0px 30px -10px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 30px -10px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 30px -10px rgba(0,0,0,0.75);
    transition: margin 0.2s ease 0s;
}
.chatbox.toggled {
    margin-left: 0px;
}
.chatbox-tab {
    top: 30px;
    padding: 10px;
    position: absolute;
    color: #ffffff;
    background: #393B3C;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-right: 4px solid #535353;
    transition: background 0.2s ease 0s;
}
.chatbox-tab:hover {
    background: #555555;
    cursor: pointer;
}
.chatbox-content {
    padding: 15px;
    flex: 1;
    overflow-x: hidden;
    overflow-y: hidden;
}
.chatbox-content:hover {
    overflow-y: auto;
}
.chatbox-footer {
    /*align-self:flex-end;*/
    display:flex;
    border-top:1px solid #eeeeee;
    /*height: 100px;*/
}
.chatbox-footer input {
    flex: 1;
    margin: 0;
    padding:10px;
    border: none;
}
.chatbox-footer button {
    background: #7cd97c;
    color: #ffffff;
    margin: 0;
    padding: 0;
    border: none;
    padding: 10px 15px 10px 15px;
}
.chatbox-footer button:hover {
    background: #5bb85b;
    cursor: pointer;
}

/* main content */
.content {
    display: flex;
    flex: 1;
    align-items: center; /* vertical centering */
    justify-content: center; /* horizontal: centering */
    height: calc(100vh - 60px);
}

/* footer toolbar */
.footer {
    background: #292B2C;
    display: flex;
    flex-basis: 100%;
    height: 60px;
    padding: 0 20px 0 20px ;
}
.footer-group {
    flex: 1;
    display: flex;
}
.footer-group-left {
    justify-content:flex-start;
}
.footer-group-center {
    justify-content:center;

}
.footer-group-right {
    justify-content:flex-end;

}
.footer-group a, .footer-group span {
    padding: 0 20px 0 20px;
    color: #ffffff;
    text-decoration: none;
    align-self:stretch;
    display: flex;
    align-items: center;
}
.footer-group a:hover {
    background: #444444;
}

Answer 1

内容在下方，因为该内容的宽度为 100%，旁边菜单的边距向下推。
解决方案是在切换 aside 时减小内容的宽度。
将类 .toggled 切换到 .content 类，当 aside 被切换时，并应用此 css:

.content.toggled {
  width: calc(100% - 300px);
}

这是一个更新的 fiddle :fiddle