I\'m making a mobile responsive page and I\'m using flexbox for the first time.
The problem that I have is when there is a lot of information in the content div the
2 things you need to do:
Change the flex-shrink value in flex: 1 0 auto
from 0
to 1
(flex: 1 1 auto
) so the content
element is allowed to shrink
As you have a very long word, you also need to add word-wrap: break-word
to insert line breaks within words to prevent text from overflowing
Note, word-wrap
has been renamed to overflow-wrap
, though not all browsers support the new name, so if you to use it, I would keep the old as well for now.
Stack snippet
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
text-align: center;
}
body .header {
width: 100%;
height: 182px;
background: white;
}
body .holygrail-body {
flex: 1 0 auto;
display: flex;
width:1000px;
margin-right:auto;
margin-left:auto;
}
body .holygrail-body .content {
flex: 1 1 auto; /* changed */
background: lightgreen;
overflow-y: auto;
word-wrap: break-word; /* added */
}
body .holygrail-body .nav {
width: 240px;
list-style: none;
text-align: left;
order: -1;
margin: 0;
}
body .holygrail-body .aside {
width: 100px;
background: orange;
}
body .footer {
width: 100%;
height: 60px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #fff;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.mobile-header{display: none;}
.hamburger{display: none;}
ul, ol {
margin-top:10px;
}
.nav li {
list-style: none outside none;
line-height: 36px;
margin-left:-15px;
}
.nav li a {
color: #5f141f;
text-decoration: none;
text-shadow: 2px 1px #f6eaec;
font-size: 18px;
margin-left:-15px;
}
.sidenav li {
list-style: none outside none;
line-height: 36px;
margin-left:-15px;
}
.sidenav li a {
color: #5f141f;
text-decoration: none;
text-shadow: 2px 1px #f6eaec;
font-size: 18px;
margin-left:-15px;
}
@media (max-width: 700px) {
body .holygrail-body {
flex-direction: column;
}
body .holygrail-body .nav, body .holygrail-body .aside {
width: 100%;
}
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
.hamburger{display: inline;margin-left:-900px;}
.nav{display: none;}
.mobile-header{display: inline;}
.header{display: none;}
}
☰ Menu
Tessssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssst