How to avoid content from a child div overflowing the parent container? This is probably one of the most frequent question ever asked and the most frequent and a working solution is to use max-height:100%, which ofcourse works.
The problem is when I cannot use 100%, for example, in the given jsfiddle, I have an header which takes some x pixel height. I can of course arbitrarily decrease the percentage but it is unstable when the window is resized.
JSFiddle - FUpsA
Edit:
I like to mention that the Header should not be a part of the scrolling content, hence using overflow:auto on the parent div is not an option.
According your reply on my comment i suggest to use css calc:
html
<div style="width:300px; height:300px; margin-left:auto; margin-right:auto;border:2px solid #000;">
<div>
<h2>Some Header</h2>
</div>
<div id="mainTextCont" style="overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique. Donec feugiat interdum justo, eu volutpat leo lacinia hendrerit. Donec consequat risus ac leo molestie venenatis. Nulla eleifend lobortis tincidunt. Duis lobortis, ligula ac bibendum tempor, eros neque dignissim leo, nec aliquet turpis turpis eget lectus. Maecenas convallis velit ac nunc euismod, vel cursus orci tincidunt. Aenean convallis fermentum porttitor. Phasellus nunc mauris, tincidunt in aliquet quis, tempor in lectus. Vestibulum faucibus velit ultrices, fringilla nunc sed, aliquet tellus. Vivamus id turpis sed nibh sagittis dictum. Morbi ut eros consectetur, fermentum mauris eget, porttitor metus. Praesent ut magna rutrum, eleifend nulla in, vehicula libero.
Integer accumsan, tellus sit amet tincidunt semper, sem purus convallis mauris, a accumsan ante lacus vel leo. Suspendisse suscipit sollicitudin velit ut sodales. Aenean id nisl tellus. Morbi sagittis tincidunt elementum. Fusce consectetur consectetur metus ut tempor. Fusce fermentum dui tortor, sit amet fringilla ligula venenatis id. Nulla facilisi. Fusce eu felis justo. Sed vel ultrices massa. In tincidunt auctor posuere. Morbi tristique orci dolor, sit amet aliquet dui tincidunt sit amet. Sed posuere metus quis est tincidunt, quis euismod arcu vestibulum. Sed vestibulum in lacus vel hendrerit.
Etiam ultrices, ante in tempus dictum, nisl dui ultrices felis, et pellentesque arcu nisi sed justo. In sollicitudin, nibh et malesuada elementum, augue metus euismod quam, ut sollicitudin nulla turpis vel mauris. Phasellus ut dapibus enim. Donec tempus orci nec est aliquam, non scelerisque nibh pharetra. Cras scelerisque elementum libero, a faucibus turpis congue consectetur. Aliquam non est non elit luctus tincidunt sed sed orci. Suspendisse mollis ante arcu. Maecenas molestie erat mauris, sed egestas sapien malesuada nec. Quisque et ante id nunc scelerisque egestas.
Etiam vitae leo vitae turpis commodo semper vel ut justo. Curabitur aliquet iaculis lacus, vel pellentesque eros cursus in. Donec eget dui viverra, convallis libero vel, blandit dolor. Sed vulputate diam quis lacus tincidunt ullamcorper. Proin viverra ligula sem. Nulla tempus felis enim, a scelerisque dui rhoncus lacinia. Ut iaculis auctor faucibus. Phasellus purus lectus, tempor vel tellus sit amet, varius consequat lorem. Donec eget consectetur nunc. Vestibulum vulputate euismod dictum.
Nullam nec nisi non nunc feugiat gravida. Sed tincidunt mi eleifend, posuere lacus commodo, adipiscing arcu. Proin pharetra augue vitae elit mollis, eu porta turpis pellentesque. Nulla facilisi. Nam feugiat id ante dapibus tincidunt. Quisque scelerisque imperdiet commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit sapien, tincidunt non consectetur in, pellentesque nec justo.
</div>
</div>
css
#mainTextCont{
height: calc(100% - 75px);
}
fiddle
Please add overflow:hidden; to your parent div and for child div set height less than parent div ie height:210px
<div style="width:300px; height:300px; margin-left:auto; margin-right:auto;border:2px solid #000; overflow:hidden;">
<div>
<h2>Some Header</h2>
</div>
<div style="overflow:auto; height:210px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique. Donec feugiat interdum justo, eu volutpat leo lacinia hendrerit. Donec consequat risus ac leo molestie venenatis. Nulla eleifend lobortis tincidunt. Duis lobortis, ligula ac bibendum tempor, eros neque dignissim leo, nec aliquet turpis turpis eget lectus. Maecenas convallis velit ac nunc euismod, vel cursus orci tincidunt. Aenean convallis fermentum porttitor. Phasellus nunc mauris, tincidunt in aliquet quis, tempor in lectus. Vestibulum faucibus velit ultrices, fringilla nunc sed, aliquet tellus. Vivamus id turpis sed nibh sagittis dictum. Morbi ut eros consectetur, fermentum mauris eget, porttitor metus. Praesent ut magna rutrum, eleifend nulla in, vehicula libero.
Integer accumsan, tellus sit amet tincidunt semper, sem purus convallis mauris, a accumsan ante lacus vel leo. Suspendisse suscipit sollicitudin velit ut sodales. Aenean id nisl tellus. Morbi sagittis tincidunt elementum. Fusce consectetur consectetur metus ut tempor. Fusce fermentum dui tortor, sit amet fringilla ligula venenatis id. Nulla facilisi. Fusce eu felis justo. Sed vel ultrices massa. In tincidunt auctor posuere. Morbi tristique orci dolor, sit amet aliquet dui tincidunt sit amet. Sed posuere metus quis est tincidunt, quis euismod arcu vestibulum. Sed vestibulum in lacus vel hendrerit.
Etiam ultrices, ante in tempus dictum, nisl dui ultrices felis, et pellentesque arcu nisi sed justo. In sollicitudin, nibh et malesuada elementum, augue metus euismod quam, ut sollicitudin nulla turpis vel mauris. Phasellus ut dapibus enim. Donec tempus orci nec est aliquam, non scelerisque nibh pharetra. Cras scelerisque elementum libero, a faucibus turpis congue consectetur. Aliquam non est non elit luctus tincidunt sed sed orci. Suspendisse mollis ante arcu. Maecenas molestie erat mauris, sed egestas sapien malesuada nec. Quisque et ante id nunc scelerisque egestas.
Etiam vitae leo vitae turpis commodo semper vel ut justo. Curabitur aliquet iaculis lacus, vel pellentesque eros cursus in. Donec eget dui viverra, convallis libero vel, blandit dolor. Sed vulputate diam quis lacus tincidunt ullamcorper. Proin viverra ligula sem. Nulla tempus felis enim, a scelerisque dui rhoncus lacinia. Ut iaculis auctor faucibus. Phasellus purus lectus, tempor vel tellus sit amet, varius consequat lorem. Donec eget consectetur nunc. Vestibulum vulputate euismod dictum.
Nullam nec nisi non nunc feugiat gravida. Sed tincidunt mi eleifend, posuere lacus commodo, adipiscing arcu. Proin pharetra augue vitae elit mollis, eu porta turpis pellentesque. Nulla facilisi. Nam feugiat id ante dapibus tincidunt. Quisque scelerisque imperdiet commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit sapien, tincidunt non consectetur in, pellentesque nec justo.
</div>
</div>
Overflow is for the parent and describes how to wrap the child contents.
<div style="width:300px; height:300px; margin-left:auto; margin-right:auto;border:2px solid #000;overflow:auto;">
<div>
<h2>Some Header</h2>
</div>
<div style="overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum...
</div>
</div>
Updated Answer:
add overflow:hidden; in parent div sorry I did not notice that you don't want to change height.. now its as per your requirement.
Like this:
<div style="width:300px;overflow:hidden; height:300px; margin-left:auto; margin-right:auto;border:2px solid #000;">
<div>
<h2>Some Header</h2>
</div>
<div style="overflow:auto; max-height:100%">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique.
</div>
</div>
One of my colleagues came up with a very interesting solution and I was simply amazed! The solution is compatible with IE 5.5+ and its purely CSS.
He used the property of containers with postion:relative which modifies the scope of their child elements with position:absolute. more information about that at css-tricks
This is a sample structure of the solution, refer the fiddle for more details
<div id='parent' style='position:relative'>
<div id='header' style='height:75px'>
<!-- Header -->
</div>
<div id='child' style='position:absolute; top:75px;bottom:0px; overflow:auto'>
<!-- Content-->
</div>
</div>
Note that the height is set only for the static content and not for the dynamic content
JSFiddle - FUpsA - Solution
The problem is that the header takes up space. When you combine the headers height with 100% of the parent (percentages are based on the parent element) it is going to be over 100% of course.
What you should do is make the headers height one percentage and the text part other percentage.
For example:
<div style="width:300px; height:300px; margin-left:auto; margin-right:auto;border:2px solid #000;">
<div style="height: 20%;">
<h2>Some Header</h2>
</div>
<div style="overflow:auto; max-height:70%">
...
</div>
</div>
Related
i have been stuck with this problem for days now and can't solve it
basically i have a page with vertical text in a div that has these properties :
.sideText {
white-space: nowrap;
writing-mode: vertical-rl;
position: absolute;
color: var(--primary-color);
left: 0;
}
it is a very long text (whole paragraph)
what i am trying to achieve is that this text takes the entire height of page (this div is the first tag inside body)
when i try to give it :
height: 100%;
it takes the height of the viewport and stops right after
any suggestion on how i can do this ?
thank you all
Edit: adding reproducible page
.sideText {
white-space: nowrap;
writing-mode: vertical-rl;
position: absolute;
color: var(--primary-color);
left: 0;
}
<html>
<body>
<div id="sideText" class="fs-1 fw-bold sideText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget malesuada mi, tempus posuere elit. Donec eget massa a orci ultrices facilisis at id velit. Duis in purus diam. Phasellus tortor sem, porta a augue ac, porttitor ultricies quam. In metus mi, volutpat eu urna quis, consequat tristique velit. Suspendisse malesuada blandit arcu, in malesuada dui pulvinar non. Fusce ullamcorper, nibh sit amet tempor ullamcorper, mauris mauris aliquam nunc, eu aliquet ipsum velit eget leo. Nam varius pulvinar condimentum. Sed egestas libero vel lacus placerat mollis. Nullam vehicula sollicitudin dui. Proin vel accumsan arcu. Vestibulum in risus vehicula, eleifend enim at, lobortis elit. Fusce aliquam efficitur sapien, nec cursus urna tincidunt eget.
</div>
<div style="margin:10px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget malesuada mi, tempus posuere elit. Donec eget massa a orci ultrices facilisis at id velit. Duis in purus diam. Phasellus tortor sem, porta a augue ac, porttitor ultricies quam. In metus mi, volutpat eu urna quis, consequat tristique velit. Suspendisse malesuada blandit arcu, in malesuada dui pulvinar non. Fusce ullamcorper, nibh sit amet tempor ullamcorper, mauris mauris aliquam nunc, eu aliquet ipsum velit eget leo. Nam varius pulvinar condimentum. Sed egestas libero vel lacus placerat mollis. Nullam vehicula sollicitudin dui. Proin vel accumsan arcu. Vestibulum in risus vehicula, eleifend enim at, lobortis elit. Fusce aliquam efficitur sapien, nec cursus urna tincidunt eget.
</div>
</body>
</html>
her you go .
i choose to increase font-size and line-height you can choose whatever you seem fit for your requirments,
var $div = $('.main-text');
$(window).resize(function () {
// Get the current height of the div and save it as a variable.
var height = $div.height();
// Set the font-size and line-height of the text within the div according to the current height.
$div.css({
'font-size': (height/2) + 'px',
'line-height': height + 'px'
})
}).trigger('resize');
.sideText {
white-space: nowrap;
writing-mode: vertical-rl;
position: absolute;
color: var(--primary-color);
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<div id="sideText" class="fs-1 fw-bold sideText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget malesuada mi, tempus posuere elit. Donec eget massa a orci ultrices facilisis at id velit. Duis in purus diam. Phasellus tortor sem, porta a augue ac, porttitor ultricies quam. In metus mi, volutpat eu urna quis, consequat tristique velit. Suspendisse malesuada blandit arcu, in malesuada dui pulvinar non. Fusce ullamcorper, nibh sit amet tempor ullamcorper, mauris mauris aliquam nunc, eu aliquet ipsum velit eget leo. Nam varius pulvinar condimentum. Sed egestas libero vel lacus placerat mollis. Nullam vehicula sollicitudin dui. Proin vel accumsan arcu. Vestibulum in risus vehicula, eleifend enim at, lobortis elit. Fusce aliquam efficitur sapien, nec cursus urna tincidunt eget.
</div>
<div class="main-text" style="margin:10px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget malesuada mi, tempus posuere elit. Donec eget massa a orci ultrices facilisis at id velit. Duis in purus diam. Phasellus tortor sem, porta a augue ac, porttitor ultricies quam. In metus mi, volutpat eu urna quis, consequat tristique velit. Suspendisse malesuada blandit arcu, in malesuada dui pulvinar non. Fusce ullamcorper, nibh sit amet tempor ullamcorper, mauris mauris aliquam nunc, eu aliquet ipsum velit eget leo. Nam varius pulvinar condimentum. Sed egestas libero vel lacus placerat mollis. Nullam vehicula sollicitudin dui. Proin vel accumsan arcu. Vestibulum in risus vehicula, eleifend enim at, lobortis elit. Fusce aliquam efficitur sapien, nec cursus urna tincidunt eget.
</div>
</body>
</html>
You could use this line of JavaScript, to archive what you want:
document.getElementById("sideText").style.height = document.body.clientHeight + "px";
.sideText {
white-space: nowrap;
writing-mode: vertical-rl;
position: absolute;
color: var(--primary-color);
left: 0;
}
<html>
<body>
<div id="sideText" class="fs-1 fw-bold sideText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget malesuada mi, tempus posuere elit. Donec eget massa a orci ultrices facilisis at id velit. Duis in purus diam. Phasellus tortor sem, porta a augue ac, porttitor ultricies quam. In metus mi, volutpat eu urna quis, consequat tristique velit. Suspendisse malesuada blandit arcu, in malesuada dui pulvinar non. Fusce ullamcorper, nibh sit amet tempor ullamcorper, mauris mauris aliquam nunc, eu aliquet ipsum velit eget leo. Nam varius pulvinar condimentum. Sed egestas libero vel lacus placerat mollis. Nullam vehicula sollicitudin dui. Proin vel accumsan arcu. Vestibulum in risus vehicula, eleifend enim at, lobortis elit. Fusce aliquam efficitur sapien, nec cursus urna tincidunt eget.
</div>
<div style="margin:10px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget malesuada mi, tempus posuere elit. Donec eget massa a orci ultrices facilisis at id velit. Duis in purus diam. Phasellus tortor sem, porta a augue ac, porttitor ultricies quam. In metus mi, volutpat eu urna quis, consequat tristique velit. Suspendisse malesuada blandit arcu, in malesuada dui pulvinar non. Fusce ullamcorper, nibh sit amet tempor ullamcorper, mauris mauris aliquam nunc, eu aliquet ipsum velit eget leo. Nam varius pulvinar condimentum. Sed egestas libero vel lacus placerat mollis. Nullam vehicula sollicitudin dui. Proin vel accumsan arcu. Vestibulum in risus vehicula, eleifend enim at, lobortis elit. Fusce aliquam efficitur sapien, nec cursus urna tincidunt eget.
</div>
</body>
</html>
How do I achieve this following type of result using HTML, CSS and Bootstrap?
You can do this without bootstrap. To get the image inline with your text, you can use float: right on the image. Here is a simple inline CSS example:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis pulvinar nulla, scelerisque viverra lorem pellentesque non. Phasellus ligula leo, facilisis eget<p>
<p>Proin sit amet elit eget dolor sagittis blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed sollicitudin ullamcorper mi sit amet pretium. Nam quis pulvinar purus. <img src="http://via.placeholder.com/350x150" style="float:right" />Integer eget lobortis justo, a porta odio. In non lacinia leo. In hac habitasse platea dictumst. </p>
<p>Nullam elementum, justo et ornare semper, sapien arcu ornare nunc, a laoreet tortor neque sit amet dui. Aenean eleifend nibh nec tempus interdum. Nulla augue purus, scelerisque in massa sed, fringilla tempor nisl. Nam tincidunt porta nibh, in pharetra quam pellentesque ac. Nunc metus turpis, rhoncus eu mauris eu, hendrerit suscipit tellus. Aliquam erat volutpat. Praesent odio nisi, venenatis ac scelerisque vel, pharetra et eros. Vivamus at elementum mauris, nec consequat odio. Quisque volutpat pharetra mollis. Curabitur tempor orci in auctor ultrices. Aliquam condimentum elementum euismod.</p>
If you really want to use bootstrap though, you can add the pull-right class to the image, like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis pulvinar nulla, scelerisque viverra lorem pellentesque non. Phasellus ligula leo, facilisis eget<p>
<p>Proin sit amet elit eget dolor sagittis blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed sollicitudin ullamcorper mi sit amet pretium. Nam quis pulvinar purus. <img src="http://via.placeholder.com/350x150" class="pull-right" />Integer eget lobortis justo, a porta odio. In non lacinia leo. In hac habitasse platea dictumst. </p>
<p>Nullam elementum, justo et ornare semper, sapien arcu ornare nunc, a laoreet tortor neque sit amet dui. Aenean eleifend nibh nec tempus interdum. Nulla augue purus, scelerisque in massa sed, fringilla tempor nisl. Nam tincidunt porta nibh, in pharetra quam pellentesque ac. Nunc metus turpis, rhoncus eu mauris eu, hendrerit suscipit tellus. Aliquam erat volutpat. Praesent odio nisi, venenatis ac scelerisque vel, pharetra et eros. Vivamus at elementum mauris, nec consequat odio. Quisque volutpat pharetra mollis. Curabitur tempor orci in auctor ultrices. Aliquam condimentum elementum euismod.</p>
I made a page to practice using flexbox. It has 1 container in red with 3 flex items. When I minimize the screen the items drop below each other but do not use up the full width of container.
How can I achieve this?
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: stretch;
margin: 40px;
background-color: red;
}
.col {
max-width: 400px;
}
.one,
.two-a,
.two-b,
.three {
background-color: black;
color: white;
padding: 20px;
margin: 1rem;
}
h2,
h3 {
font-family: arial;
}
h2 {
margin-left: 2rem;
}
<div class="container">
<!-- <h2>Flexbox</h2> -->
<div class="one col">
<h3>Step 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget dui ut justo auctor semper a ullamcorper justo. Morbi placerat tortor tortor, ac dignissim leo semper ac. Donec non metus sit amet neque eleifend rhoncus vitae id dolor. Etiam vestibulum
lobortis sem semper laoreet. Vestibulum egestas elit sed lacus egestas, placerat congue erat faucibus. Nunc ac dui auctor, fermentum turpis ac, mattis magna. Nulla pellentesque, ligula vel faucibus imperdiet, arcu ligula ornare quam, et blandit
risus sem sit amet neque. Curabitur commodo dui et metus suscipit, ut dignissim risus hendrerit. Quisque at odio nec risus condimentum ullamcorper. Nulla sit amet felis sit amet neque aliquet auctor sed nec metus. Sed gravida mattis sem, nec finibus
diam suscipit sit amet.</p>
</div>
<div class="two col">
<div class="two-a">
<h3>Step 2a</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget dui ut justo auctor semper a ullamcorper justo. Morbi placerat tortor tortor, ac dignissim leo semper ac. Donec non metus sit amet neque eleifend rhoncus vitae id dolor. Etiam
vestibulum lobortis sem semper laoreet. Vestibulum egestas elit sed lacus egestas, placerat congue erat faucibus. Nunc ac dui auctor, fermentum turpis ac, mattis magna. Nulla pellentesque, ligula vel faucibus imperdiet, arcu ligula ornare quam,
et blandit risus sem sit amet neque. Curabitur commodo dui et metus suscipit, ut dignissim risus hendrerit. Quisque at odio nec risus condimentum ullamcorper. Nulla sit amet felis sit amet neque aliquet auctor sed nec metus. Sed gravida mattis
sem, nec finibus diam suscipit sit amet.</p>
</div>
<div class="two-b">
<h3>Step 2b</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget dui ut justo auctor semper a ullamcorper justo. Morbi placerat tortor tortor, ac dignissim leo semper ac. Donec non metus sit amet neque eleifend rhoncus vitae id dolor. Etiam
vestibulum lobortis sem semper laoreet. Vestibulum egestas elit sed lacus egestas, placerat congue erat faucibus. Nunc ac dui auctor, fermentum turpis ac, mattis magna. Nulla pellentesque, ligula vel faucibus imperdiet, arcu ligula ornare quam,
et blandit risus sem sit amet neque. Curabitur commodo dui et metus suscipit, ut dignissim risus hendrerit. Quisque at odio nec risus condimentum ullamcorper. Nulla sit amet felis sit amet neque aliquet auctor sed nec metus. Sed gravida mattis
sem, nec finibus diam suscipit sit amet.</p>
</div>
</div>
<div class="three col">
<h3>Step 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget dui ut justo auctor semper a ullamcorper justo. Morbi placerat tortor tortor, ac dignissim leo semper ac. Donec non metus sit amet neque eleifend rhoncus vitae id dolor. Etiam vestibulum
lobortis sem semper laoreet. Vestibulum egestas elit sed lacus egestas, placerat congue erat faucibus. Nunc ac dui auctor, fermentum turpis ac, mattis magna. Nulla pellentesque, ligula vel faucibus imperdiet, arcu ligula ornare quam, et blandit
risus sem sit amet neque. Curabitur commodo dui et metus suscipit, ut dignissim risus hendrerit. Quisque at odio nec risus condimentum ullamcorper. Nulla sit amet felis sit amet neque aliquet auctor sed nec metus. Sed gravida mattis sem, nec finibus
diam suscipit sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget dui ut justo auctor semper a ullamcorper justo. Morbi placerat tortor tortor, ac dignissim leo semper ac. Donec non metus sit amet neque eleifend rhoncus vitae id dolor. Etiam vestibulum
lobortis sem semper laoreet. Vestibulum egestas elit sed lacus egestas, placerat congue erat faucibus. Nunc ac dui auctor, fermentum turpis ac, mattis magna. Nulla pellentesque, ligula vel faucibus imperdiet, arcu ligula ornare quam, et blandit
risus sem sit amet neque. Curabitur commodo dui et metus suscipit, ut dignissim risus hendrerit. Quisque at odio nec risus condimentum ullamcorper. Nulla sit amet felis sit amet neque aliquet auctor sed nec metus. Sed gravida mattis sem, nec finibus
diam suscipit sit amet.</p>
</div>
</div>
https://codepen.io/cian-w/pen/EQZmRz
You have a rule limiting the width of flex items:
.col {
max-width: 400px;
}
Therefore, the items cannot fill the full width of the container because they cannot expand beyond 400px. Try this instead:
.col {
flex: 1 0 400px;
}
This shorthand declaration breaks down to:
flex-grow: 1
flex-shrink: 0
flex-basis: 400px
revised codepen
I'm trying to build a website template where the main #content div is 75% the width of the screen, and centered on the page, but I also want to occasionally have sections that span the full width of the viewport. The way I've accomplished this is by applying a class of .full-width on these sections that overrides the margins of the #content div by setting the width to 100vw, as well as some other properties that you can see in the CSS below.
The problem is that, when enough content is on the page that vertical scrollbars appear, the width of the scrollbars is included in the calculation of the viewport width, so content gets hidden behind the scrollbars.
Is there a way around this problem, or a completely different and better way to do what I'm trying to accomplish?
#content {
width: 75%;
margin: 0 auto;
}
.full-width {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);
box-sizing: border-box;
}
.full-width img {
width: 100%;
}
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus.
Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis.
Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<div class="full-width">
<img src="http://toprival.com/temp/test-image.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla
dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit
lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus.
Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis.
Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
</div>
<!-- content -->
You can have the full-width by default and when for #content > p use width: 75% (Now you won't need to set vw, the width will auto-adjust)
Note that setting width 75% for the whole #content and then having full-width divs in between makes things needlessly complex - though hacky solutions using negative margins and positioning can be done.
See demo below:
#content > p{
width: 75%;
margin: 0 auto;
}
.full-width {
width: 100%;
box-sizing: border-box;
}
.full-width img {
width: 100%;
}
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus.
Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis.
Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<div class="full-width">
<img src="http://toprival.com/temp/test-image.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla
dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit
lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus.
Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis.
Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
</div>
<!-- content -->
I have an odd dilemma where I need a fixed div to be positioned relative to it's parent, which is also a fixed div.
Once you see my example you will understand.
<div class="drawer">
<p>Drawer</p>
</div>
<div class="sub-drawer">
x
<p>Sub Drawer</p>
</div>
Basically I'm building a drawer that comes out from the left of the page. The first drawer is a menu, the sub drawer is where content is pulled in from something they click in the first drawer. The sub drawer can be scrollable. The issue is that I want a fixed position close link at the top right of the sub drawer, so when they scroll in the sub drawer, the close link stays at the top, but I can't figure out how to do it.
Fiddle here: http://jsfiddle.net/z1n7kmky/
Your elements use fixed positioning, which means that all the offsets (top, left and so on) are taken with respect to the screen (root element).
Here is one way of realizing your layout.
Add a wrapper around your content .wrap and position .wrap absolutely
within .sub-drawer, and use the top and bottom offsets to make it fill
the space as needed.
Invoke scrolling on .wrap instead of .sub-drawer.
Now, position .close-drawer abosolutely with respect to .sub-drawer as
you wanted initially.
See below or visit fiddle: http://jsfiddle.net/audetwebdesign/q6L7q70a/
.drawer {
position:fixed;
width:200px;
top:0;
left:0;
bottom:0;
background:#666;
padding:25px;
}
.sub-drawer {
position:fixed;
width:200px;
left:200px;
top:0;
bottom:0;
background:#999;
}
.sub-drawer .wrap {
position:absolute;
top:0;
bottom:0;
padding: 25px;
overflow: scroll;
}
.close-drawer {
position:absolute;
top:10px;
right: 25px;
border: 1px solid blue;
}
<div class="drawer">
<p>Drawer</p>
</div>
<div class="sub-drawer">
x
<div class="wrap">
<p>Sub Drawer</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis iaculis, dolor at malesuada gravida, mi arcu mollis quam, vel mattis velit mi eu arcu. Proin lacinia purus dignissim mi semper rutrum. Donec tellus ex, dignissim eget suscipit nec, bibendum in orci. Donec quam tellus, venenatis eget pharetra vitae, lacinia eget diam. Sed convallis lobortis ipsum, non consequat libero posuere quis. Quisque ac ex vitae felis tempor fringilla id vel nisl. Pellentesque auctor risus leo. Nam at purus bibendum, blandit ipsum id, interdum urna. Sed elementum, eros sed consectetur condimentum, lorem ex feugiat nibh, id tempor erat dolor et ligula. Aenean fermentum tempus lectus et consectetur. Phasellus pretium magna in ex interdum ornare. Praesent blandit mi mi, in egestas lectus vestibulum id. Donec a commodo quam. In non porttitor quam. Duis elementum mauris eu elit auctor, pellentesque pellentesque quam ornare.</p>
<p>Nam eget tincidunt enim, eget porttitor dui. Donec malesuada at metus in sollicitudin. Maecenas feugiat lorem tellus, eu faucibus purus gravida sagittis. Donec pulvinar porttitor semper. Cras nec laoreet urna. Donec porta mi in neque dictum, vitae venenatis leo fermentum. Duis imperdiet ante et velit posuere, a semper arcu cursus. Aliquam suscipit odio ac sem sollicitudin mattis. Vestibulum erat lacus, dignissim eu ultricies sed, consequat sed nulla. Sed sagittis metus id ligula blandit gravida.</p>
<p>Etiam quis arcu quis eros placerat semper. Praesent quam magna, sagittis vitae interdum in, dictum et enim. Nullam facilisis, elit vitae rutrum molestie, enim arcu euismod purus, ac scelerisque erat lectus porttitor magna. Ut ullamcorper nec nibh id aliquet. Sed quis tortor vel eros consequat dignissim. Nunc ut egestas dolor, lacinia sollicitudin est. Praesent accumsan nulla purus, sed scelerisque turpis aliquam porta. Cras commodo vestibulum molestie. Cras mollis nunc in gravida fermentum. Sed laoreet egestas odio, vel tempus ipsum vestibulum sit amet. Quisque cursus tempus nisi eu tristique. Duis quis nisl tempor, vestibulum diam at, sodales lorem. Phasellus quis justo nibh. Cras gravida pulvinar ante ut fringilla. Nullam placerat porta eros. Proin accumsan mauris mi, eu volutpat leo hendrerit nec.</p>
</div>
</div>
<div class="page">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis iaculis, dolor at malesuada gravida, mi arcu mollis quam, vel mattis velit mi eu arcu. Proin lacinia purus dignissim mi semper rutrum. Donec tellus ex, dignissim eget suscipit nec, bibendum in orci. Donec quam tellus, venenatis eget pharetra vitae, lacinia eget diam. Sed convallis lobortis ipsum, non consequat libero posuere quis. Quisque ac ex vitae felis tempor fringilla id vel nisl. Pellentesque auctor risus leo. Nam at purus bibendum, blandit ipsum id, interdum urna. Sed elementum, eros sed consectetur condimentum, lorem ex feugiat nibh, id tempor erat dolor et ligula. Aenean fermentum tempus lectus et consectetur. Phasellus pretium magna in ex interdum ornare. Praesent blandit mi mi, in egestas lectus vestibulum id. Donec a commodo quam. In non porttitor quam. Duis elementum mauris eu elit auctor, pellentesque pellentesque quam ornare.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis iaculis, dolor at malesuada gravida, mi arcu mollis quam, vel mattis velit mi eu arcu. Proin lacinia purus dignissim mi semper rutrum. Donec tellus ex, dignissim eget suscipit nec, bibendum in orci. Donec quam tellus, venenatis eget pharetra vitae, lacinia eget diam. Sed convallis lobortis ipsum, non consequat libero posuere quis. Quisque ac ex vitae felis tempor fringilla id vel nisl. Pellentesque auctor risus leo. Nam at purus bibendum, blandit ipsum id, interdum urna. Sed elementum, eros sed consectetur condimentum, lorem ex feugiat nibh, id tempor erat dolor et ligula. Aenean fermentum tempus lectus et consectetur. Phasellus pretium magna in ex interdum ornare. Praesent blandit mi mi, in egestas lectus vestibulum id. Donec a commodo quam. In non porttitor quam. Duis elementum mauris eu elit auctor, pellentesque pellentesque quam ornare.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis iaculis, dolor at malesuada gravida, mi arcu mollis quam, vel mattis velit mi eu arcu. Proin lacinia purus dignissim mi semper rutrum. Donec tellus ex, dignissim eget suscipit nec, bibendum in orci. Donec quam tellus, venenatis eget pharetra vitae, lacinia eget diam. Sed convallis lobortis ipsum, non consequat libero posuere quis. Quisque ac ex vitae felis tempor fringilla id vel nisl. Pellentesque auctor risus leo. Nam at purus bibendum, blandit ipsum id, interdum urna. Sed elementum, eros sed consectetur condimentum, lorem ex feugiat nibh, id tempor erat dolor et ligula. Aenean fermentum tempus lectus et consectetur. Phasellus pretium magna in ex interdum ornare. Praesent blandit mi mi, in egestas lectus vestibulum id. Donec a commodo quam. In non porttitor quam. Duis elementum mauris eu elit auctor, pellentesque pellentesque quam ornare.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis iaculis, dolor at malesuada gravida, mi arcu mollis quam, vel mattis velit mi eu arcu. Proin lacinia purus dignissim mi semper rutrum. Donec tellus ex, dignissim eget suscipit nec, bibendum in orci. Donec quam tellus, venenatis eget pharetra vitae, lacinia eget diam. Sed convallis lobortis ipsum, non consequat libero posuere quis. Quisque ac ex vitae felis tempor fringilla id vel nisl. Pellentesque auctor risus leo. Nam at purus bibendum, blandit ipsum id, interdum urna. Sed elementum, eros sed consectetur condimentum, lorem ex feugiat nibh, id tempor erat dolor et ligula. Aenean fermentum tempus lectus et consectetur. Phasellus pretium magna in ex interdum ornare. Praesent blandit mi mi, in egestas lectus vestibulum id. Donec a commodo quam. In non porttitor quam. Duis elementum mauris eu elit auctor, pellentesque pellentesque quam ornare.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis iaculis, dolor at malesuada gravida, mi arcu mollis quam, vel mattis velit mi eu arcu. Proin lacinia purus dignissim mi semper rutrum. Donec tellus ex, dignissim eget suscipit nec, bibendum in orci. Donec quam tellus, venenatis eget pharetra vitae, lacinia eget diam. Sed convallis lobortis ipsum, non consequat libero posuere quis. Quisque ac ex vitae felis tempor fringilla id vel nisl. Pellentesque auctor risus leo. Nam at purus bibendum, blandit ipsum id, interdum urna. Sed elementum, eros sed consectetur condimentum, lorem ex feugiat nibh, id tempor erat dolor et ligula. Aenean fermentum tempus lectus et consectetur. Phasellus pretium magna in ex interdum ornare. Praesent blandit mi mi, in egestas lectus vestibulum id. Donec a commodo quam. In non porttitor quam. Duis elementum mauris eu elit auctor, pellentesque pellentesque quam ornare.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis iaculis, dolor at malesuada gravida, mi arcu mollis quam, vel mattis velit mi eu arcu. Proin lacinia purus dignissim mi semper rutrum. Donec tellus ex, dignissim eget suscipit nec, bibendum in orci. Donec quam tellus, venenatis eget pharetra vitae, lacinia eget diam. Sed convallis lobortis ipsum, non consequat libero posuere quis. Quisque ac ex vitae felis tempor fringilla id vel nisl. Pellentesque auctor risus leo. Nam at purus bibendum, blandit ipsum id, interdum urna. Sed elementum, eros sed consectetur condimentum, lorem ex feugiat nibh, id tempor erat dolor et ligula. Aenean fermentum tempus lectus et consectetur. Phasellus pretium magna in ex interdum ornare. Praesent blandit mi mi, in egestas lectus vestibulum id. Donec a commodo quam. In non porttitor quam. Duis elementum mauris eu elit auctor, pellentesque pellentesque quam ornare.</p>
</div>
The problem is (as you must have figured out), a fixed element respects no one, it is taken out of the normal page flow and only respects the top master stacking context, that is the window.
The only way for it to work is to make the wrapper element (.sub-drawer) act like a stacking context in the page. The only way I know for it is to apply a transform property to it. In order not to mess with the page you could add a useless scale transform:
Updated JsFiddle
.sub-drawer {
position:fixed;
width:200px;
left:200px;
top:0;
bottom:0;
background:#999;
overflow:scroll;
padding:25px;
transform: scale(1,1);
}