CODEWITHSUNDEEP
htmltwitter-bootstrapcssflexbox
Jethro Hazelhurst
Jethro Hazelhurst

Reputation: 3285

Flexbox sidebar stop main content from wrapping under sidebar on small screens

I have a sidebar with main content that is working great... the problem is that for the main-content I am using the bootstrap class .container.

Current behaviour

When I shrink my page the main content pops underneath my sidebar.

Desired behaviour

I want the .container to shrink so that the sidebar and main-content fit on the screen.

My Code

https://jsfiddle.net/4jm70ton/

Markup:

<!-- 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;
}

Upvotes: 2

Views: 808

Answers (1)

Teuta Koraqi
Teuta Koraqi

Reputation: 1898

The content is going underneath, becuase the width of this content is 100%, and the margin of the aside menu is pushing down.
The solution is to decrease width of content when aside is toggled.
Toggle class .toggled to .content class when the aside is toggled, and apply this css:

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

Here is an updated fiddle: fiddle

Upvotes: 1

Related Questions