How can I scale the black containers height from max-height of 550px to for example height of 400px by just changing browsers width. And together with the black container the box divs also should get smaller proportionally. I want it without the use of media queries.. I want it to change dynamically so you can see it resizing pixel by pixel. I don't want it to just jump from one height to another by reaching a media queries width.
.container-black {
height: 550px;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
border-bottom: solid 8px grey;
}
.box1 {
display: flex;
justify-content: center;
align-items: center;
height: 70%;
width: 30%;
background-color: red;
}
<body>
<div class="container-black">
<div class="box1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
eligendi!</p>
</div>
<div class="box1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
eligendi!</p>
</div>
</div>
</body>
Use dynamic values such as vw or viewport width. For example, to keep your black borders you can set box1 to width: 40vw;. This means box1 will use 40% of the viewport size when resizing, and the container-black will maintain 10% of viewport width on any device. Allowing it to be responsive.
The Dynamic Viewport is the viewport sized with dynamic consideration of any UA interfaces. It will automatically adjust itself in response to UA interface elements being shown or not
css-tricks.com
EDIT -- added 2 more container-blacks and nested them in parent container and defined their height based of % so that they resize responsively.
.container-black {
height: 33%;
width: 100vw;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
border-bottom: solid 8px grey;
}
.box1 {
display: flex;
justify-content: center;
align-items: center;
height: 70%;
width: 40vw;
background-color: red;
}
.container {
height: 100vw;
}
<body>
<div class="container">
<div class="container-black">
<div class="box1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
eligendi!</p>
</div>
<div class="box1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
eligendi!</p>
</div>
</div>
<div class="container-black">
<div class="box1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
eligendi!</p>
</div>
<div class="box1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
eligendi!</p>
</div>
</div>
<div class="container-black">
<div class="box1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
eligendi!</p>
</div>
<div class="box1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
eligendi!</p>
</div>
</div>
</div>
</body>
You can use the vw unit (= percent of viewport width) in your height definition, if necessary, inside a media query
One way to do it is using vw unit on the height of the black box.
1vw equals 1% of the viewport's width.
Another way is the CSS aspect-ratio feature. You can learn more in the link below.
https://css-tricks.com/almanac/properties/a/aspect-ratio/
Related
I am currently goofing around making a website. I want to make a description div in the center of the screen that will stay centered, and when the screen rezises not stretch up and intersect or overlap other elements. How would I go about this? For further demonstration I will post a video below of what I don't want.
https://imgur.com/a/pboUcAB
* {
margin: 0;
padding: 0;
--link-easing-time: 0.15s;
}
body {
display: flex;
flex-direction: column;
}
.overview {
background-image: url(/Images/1.jpeg);
background-size: cover;
width: 100%;
height: 25em;
display: flex;
justify-content: center;
align-items: center;
margin-top: 5em;
}
.overview div {
width: 50%;
background-color: rgb(30,30,30);
border-radius: 1em;
display: flex;
flex-wrap: nowrap;
flex-basis: initial;
justify-content: center;
align-items: center;
flex-direction: column;
}
.overview p {
margin: 1em;
color: rgba(255,255,255,0.9);
}
.overview a {
margin: 1em;
}
<body>
<div class="overview">
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, inventore sint, nam sunt nihil ipsam quia accusantium praesentium voluptates, fugiat dolorum rerum officia. Nisi aperiam cumque totam molestias earum commodi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error consectetur dolorem magnam nobis officiis minima facilis vel corrupti totam fugiat tempora alias libero accusamus illo animi delectus, ut nostrum consequatur.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit excepturi, modi repudiandae ad itaque adipisci ratione a sed, voluptatem, quas aliquam dolore commodi eos possimus dignissimos nobis rerum enim tenetur?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam inventore unde sequi laudantium sapiente, quisquam necessitatibus officia eum autem nihil exercitationem, magni corporis fuga nulla eligendi! Provident explicabo recusandae earum!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis alias molestiae impedit dolores consectetur delectus voluptas saepe nam blanditiis dolorum. Inventore omnis dicta consequatur mollitia magnam! Cum corrupti aspernatur sapiente.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, laborum non. Fugit id inventore, sequi minima explicabo optio at ut, repellat ipsam quia nemo! Libero quidem eaque obcaecati tenetur dolor.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi exercitationem sint necessitatibus perferendis tempore quisquam earum ipsa minima, obcaecati dolore. Ut, unde. Mollitia animi assumenda facilis quis dolores provident asperiores!
</p>
<a href="" class="hover-effect">
Learn More
</a>
</div>
</div>
</body>
I attempted messing with flex-basis:initial and flex-wrap: nowrap;.
So I re wrote the code and what conclusion I reached was that: the <p> tag was effecting the parent div size so once I gave the p tag a height and width containment and set the overflow to hidden it worked great!
I'm a little bit stuck to be honest. Here is an example of my original code, the problem is that when I change my flex direction from row to column my picture disappears and I don't understand why =>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: rgb(104, 92, 76);
}
.container {
display: flex;
flex-direction: row-reverse;
background-color: black;
max-width: 700px;
margin: 20vh auto;
}
.content {
width: 100%;
}
.text {
color: white;
}
.image {
background: url('https://www.silocreativo.com/en/wp-content/uploads/2017/04/flexbox-cssgrid-practical-example.png');
width: 100%;
}
<div class="container">
<div class="image"></div>
<div class="content">
<div class="text"> Lorem ipsum dolor sit amet consectetur adipisicing Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia corporis repudiandae Lorem Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam aut
autem molestias debitis unde atque quam at assumenda. Atque sint illo rerum magnam aperiam suscipit commodi repudiandae officia! ipsum dolor sit, amet consectetur adipisicing elit. Fugiat quidem quasi sint culpa et rem quas deserunt labore laboriosam
mollitia. Consequatur lorem minus earum sint eius reiciendis, deleniti id vero sapiente. officiis consequuntur voluptas optio dolore nobis blanditiis adipisci maxime itaque ducimus sit incidunt, eveniet doloremque cupiditate debitis deserunt ad!
elit. Optio nihil officia commodi nostrum iure dignissimos officiis, consectetur, quae minus libero qui hic quis voluptas et quas similique vero neque facere. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores tenetur, veniam nobis
nulla molestiae recusandae quia a reiciendis corrupti exercitationem delectus iure ducimus ea odio animi cumque et optio eum! </div>
</div>
</div>
Since there is nothing that specifies the height on the <div class="image"></div>, it has a height of 0px. You could set the height to a certain value, like x vh or px,
but I would recommend using the img tag instead:
<img src="https://www.silocreativo.com/en/wp-content/uploads/2017/04/flexbox-cssgrid-practical-example.png"/> in place of <div class="image"></div>.
This way, the width and height are set to the dimensions of the actual image if nothing else is specified.
Your image tag has not an height specified, you need something like this to set the size of the div:
.image {
flex-basis: 200px; // or height: 200px;
}
Otherwise you can use the img tag instead of the background, so you can show the image at his correct dimensions. Remember to set height: auto to the img tag in this case.
A flex item needs either a height setting or content adding (which will determine the height). As the image div has no content or height its height is set to 0.
I don't recommend setting height on flex items as this is contrary to how flex works. You should set a height on the flex container and use flex-basis to set the height of your flex items.
This will allow your flex items to be responsive. If you want the image to have a fixed height you should set it's flex property to flex:0 0 <height>;
.container {
display: flex;
flex-direction: column;
background-color: black;
max-width: 700px;
margin: 20vh auto;
height: 400px;
}
.image {
display: flex;
background: url('https://www.silocreativo.com/en/wp-content/uploads/2017/04/flexbox-cssgrid-practical-example.png');
flex: 1;
}
.content {
flex: 1;
}
.text {
color: white;
}
<div class="container">
<div class="image"></div>
<div class="content">
<div class="text">Hey la bonbone est remplis de cocaine Lorem ipsum dolor sit amet consectetur adipisicing Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia corporis repudiandae Lorem Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam aut
autem molestias debitis unde atque quam at assumenda. Atque sint illo rerum magnam aperiam suscipit commodi repudiandae officia! ipsum dolor sit, amet consectetur adipisicing elit. Fugiat quidem quasi sint culpa et rem quas deserunt labore laboriosam
mollitia. Consequatur lorem minus earum sint eius reiciendis, deleniti id vero sapiente. officiis consequuntur voluptas optio dolore nobis blanditiis adipisci maxime itaque ducimus sit incidunt, eveniet doloremque cupiditate debitis deserunt ad!
elit. Optio nihil officia commodi nostrum iure dignissimos officiis, consectetur, quae minus libero qui hic quis voluptas et quas similique vero neque facere. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores tenetur, veniam nobis
nulla molestiae recusandae quia a reiciendis corrupti exercitationem delectus iure ducimus ea odio animi cumque et optio eum! </div>
</div>
</div>
Unable to use Horizontal scroll container inside a grid item. Grid item width gets expanded when a scroll container is inserted. Even scroll container unable to scroll horizontally. When I define a fixed width for the scroll container then only it is working but I want a responsive result. Can anyone please help me with this?
Here is the code snippet.
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-gap: 10px;
}
.grid-container>div {
border: 2px dotted black;
padding: 10px;
}
.code_container {
padding: 10px;
margin: 10px 0;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
background-color: black;
color: white;
}
.code {
display: inline-block;
}
<div class="grid-container">
<div class="left">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio
eos dolorem suscipit commodi.
</div>
<div class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis dolorem veniam tempore eius aliquid!
<div class="code_container">
<div class="code">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, amet aperiam libero cumque sit quod
voluptatem eligendi. Odio illo voluptas beatae omnis voluptatem, ex consectetur vitae error ad,
officia iste, debitis molestiae explicabo repellat saepe nemo cupiditate nisi. Asperiores dolorem
inventore ipsa, deleniti, consequuntur explicabo, repellendus laboriosam aut minus dolore itaque
magni incidunt odit porro ipsum. Sequi, esse! At suscipit modi laborum ex aliquam recusandae
necessitatibus distinctio, animi quo? Soluta labore enim fugiat, suscipit cumque facere impedit
iusto quaerat neque perspiciatis quas molestiae exercitationem tempora, ad cum obcaecati. Aperiam
eos, quae unde provident illum doloribus excepturi optio laudantium quidem nulla!
</div>
</div>
</div>
<div class="right">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio
eos dolorem suscipit commodi.
</div>
</div>
Unless content is set to absolute, parent div will keep growing to fit its contents size. This will make your black box (code container) grow. To prevent it, set positioning of code_container's child(.code) to absolute.
.code {
display: inline-block;
position: absolute;
}
But now, code's content jumps out from code container. To prevent this, give .code a fixed width. In your case, give 100%.
.code {
display: inline-block;
position: absolute;
width: 100%;
}
But still nothing will change because it takes it's 100% width compared to the width of the body. To prevent this, set .code's parent (.code_container) position: relative;. Now because .code's parent is positioned relative, code will calculate it's 100% width relative to .code_container's width.
Now you should be able to do horizontal scrolling and it is responsive! But the horizontal scroll bar is covering the content. So give .code_container a min-height (about 30px in your case).
Tested in chrome and firefox. Works fine!
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-gap: 10px;
}
.grid-container>div {
border: 2px dotted black;
padding: 10px;
}
.code_container {
padding: 10px 20px;
margin: 10px 0;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
background-color: black;
color: red;
position: relative;
min-height: 30px;
}
.code {
display: inline-block;
position: absolute;
width: 100%;
}
<div class="grid-container">
<div class="left">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio eos dolorem suscipit commodi.
</div>
<div class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis dolorem veniam tempore eius aliquid!
<div class="code_container">
<div class="code">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, amet aperiam libero cumque sit quod voluptatem eligendi. Odio illo voluptas beatae omnis voluptatem, ex consectetur vitae error ad, officia iste, debitis molestiae explicabo repellat saepe
nemo cupiditate nisi. Asperiores dolorem inventore ipsa, deleniti, consequuntur explicabo, repellendus laboriosam aut minus dolore itaque magni incidunt odit porro ipsum. Sequi, esse! At suscipit modi laborum ex aliquam recusandae necessitatibus
distinctio, animi quo? Soluta labore enim fugiat, suscipit cumque facere impedit iusto quaerat neque perspiciatis quas molestiae exercitationem tempora, ad cum obcaecati. Aperiam eos, quae unde provident illum doloribus excepturi optio laudantium
quidem nulla!
</div>
</div>
</div>
<div class="right">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio eos dolorem suscipit commodi.
</div>
</div>
Finally I have resolved the issue. Just need to include these lines inside container:
min-width: 0;
overflow: auto;
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-gap: 10px;
}
.grid-container>div {
border: 2px dotted black;
padding: 10px;
/* Auto scroll horizontally */
min-width: 0;
overflow: auto;
}
.code_container {
padding: 10px;
margin: 10px 0;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
background-color: black;
color: white;
}
.code {
display: inline-block;
}
<div class="grid-container">
<div class="left">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio
eos dolorem suscipit commodi.
</div>
<div class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis dolorem veniam tempore eius aliquid!
<div class="code_container">
<div class="code">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, amet aperiam libero cumque sit quod
voluptatem eligendi. Odio illo voluptas beatae omnis voluptatem, ex consectetur vitae error ad,
officia iste, debitis molestiae explicabo repellat saepe nemo cupiditate nisi. Asperiores dolorem
inventore ipsa, deleniti, consequuntur explicabo, repellendus laboriosam aut minus dolore itaque
magni incidunt odit porro ipsum. Sequi, esse! At suscipit modi laborum ex aliquam recusandae
necessitatibus distinctio, animi quo? Soluta labore enim fugiat, suscipit cumque facere impedit
iusto quaerat neque perspiciatis quas molestiae exercitationem tempora, ad cum obcaecati. Aperiam
eos, quae unde provident illum doloribus excepturi optio laudantium quidem nulla!
</div>
</div>
</div>
<div class="right">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio
eos dolorem suscipit commodi.
</div>
</div>
I am overlaying some title text on an image, currently using relative/absolute position for one of the elements (doesn't matter which). What I am struggling with is getting the parent div to fully display the content of both, irrespective of which is taller.
Example markup:
.parent {
position: relative;
overflow: hidden;
width: 100px; /* This is only here to force the title text in this example to expand beyond the image height for illustrative purposes. */
}
.background {
width: 100%;
}
.title-text {
position: absolute;
top: 0;
font-size: 32px;
color: blue;
}
<div class="parent">
<img class="background" src="http://www.placebacon.net/200/200">
<div class="title-text">
My Title (which might be quite long)
</div>
<div>
(Assuming I can acheive what I am looking for, the overflow: hidden above would obviously become redundant, but presently without it, the taller element overlaps whatever is below the parent div.)
JSBin here: http://jsbin.com/yixiniwere/edit?html,css,output
How do I get both elements to be fully visible? I can change the mark-up or introduce additional container elements if necessary.
You can overlay elements without using positioning under CSS-Grid. You just assign them the same place in the grid.
.parent {
/* IE10/11 support */
display: -ms-grid;
-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr;
margin: 1em auto;
display: grid;
width: 400px;
/* for demo purposes */
grid-template-columns: 1fr;
grid-template-rows: auto;
background: pink;
}
.parent * {
/* IE10/11 support */
-ms-grid-column: 1;
-ms-grid-row: 1;
grid-column: 1/2;
grid-row: 1;
color: red;
}
<div class="parent">
<img class="background" src="http://www.placebacon.net/400/200">
<div class="title-text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum perspiciatis commodi, adipisci reiciendis quo suscipit! Ratione laborum magnam cumque tempora ab cupiditate delectus, perferendis enim porro impedit nihil architecto, ad consequatur exercitationem
fugiat error debitis molestias itaque, eligendi necessitatibus quae dolore beatae nemo doloremque. Quos voluptate tenetur explicabo beatae nesciunt! Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo est perspiciatis possimus iusto! Voluptatem
facilis blanditiis aspernatur facere animi placeat. Quisquam fuga laudantium cupiditate eos exercitationem neque eius, distinctio consectetur?Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis aperiam, ipsum tempora reiciendis, id ea
eveniet placeat necessitatibus deserunt mollitia dignissimos exercitationem aliquam porro quaerat, labore ducimus rerum animi praesentium?Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat, laboriosam.
<div>
Another option could be to get rid of relative and absolute positioning and only set the 'margin-top' property of the text to the negative value of the background. Example (if the icon has fixed height of 100px you can just set margin top of title-text to -100px):
.parent {
width: 150px;
}
.background {
width: 100%;
}
.title-text {
margin-top:-100px;
width:100%;
font-size: 20px;
}
if the height of the background in not fixed you should be able to get it via javascript and set it there.
js bin example
The non css grid/flexboxy way
.parent {
position: relative;
width: 300px;
margin: 0 auto;
background: #a03;
}
img {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: auto;
z-index: 1;
}
.title-text {
position: absolute;
z-index: 10;
}
<div class="parent">
<img class="background" src="https://images.unsplash.com/photo-1472837525377-e96df4f8f34e?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b29757bb040fca6a9b0d79cbd31f1119">
<div class="title-text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum perspiciatis commodi, adipisci reiciendis quo suscipit! Ratione laborum magnam cumque tempora ab cupiditate delectus, perferendis enim porro impedit nihil architecto, ad consequatur exercitationem fugiat error debitis molestias itaque, eligendi necessitatibus quae dolore beatae nemo doloremque. Quos voluptate tenetur explicabo beatae nesciunt! Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo est perspiciatis possimus iusto! Voluptatem facilis blanditiis aspernatur facere animi placeat. Quisquam fuga laudantium cupiditate eos exercitationem neque eius, distinctio consectetur?Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis aperiam, ipsum tempora reiciendis, id ea eveniet placeat necessitatibus deserunt mollitia dignissimos exercitationem aliquam porro quaerat, labore ducimus rerum animi praesentium?Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat, laboriosam.
<div>
</div>
I'm trying to create a way to leak an element from it's parent container.
I'm using max-width and margin: auto for the container to center.
The child element has position: relative and uses left + translateX transform to become centered.
The CSS works OK until the page gets scrolling (content height higher than screen height).
This vertical scroll also generates horizontal scrolling.
I was able to hide it using overflow-x: hidden but i really want to know why i'm getting an horizontal scroll?
Maybe is because the transform? CODE BELOW (see in fullscreen):
.leaked {
position: relative;
left: 50%;
transform: translatex(-50%);
width: 100vw;
margin: 0;
overflow: hidden;
}
.container {
padding: 0 20px;
margin: 0 auto;
max-width: 960px;
position: relative;
}
/* EXTRA */
.block {
padding: 20px 0;
background: darkred;
color: white;
}
body {
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
height: auto;
}
figcaption {
text-align: center;
color: gray;
font-size: 0.8em;
}
.force-scroll {
height: 100vh;
}
<article class="container">
<header>
<h1>Article title</h1>
<small>To see in action, use and 1024px wide screen or larger</small>
</header>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore quaerat quos ex quo laborum officiis maxime molestias cum omnis. Veritatis quas, molestiae nihil soluta inventore provident minus nostrum atque!</p>
<figure class="leaked">
<img src="http://via.placeholder.com/1920x800" alt="Example figure" width="1920" height="800">
<figcaption>An example figure</figcaption>
</figure>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore quaerat quos ex quo laborum officiis maxime molestias cum omnis. Veritatis quas, molestiae nihil soluta inventore provident minus nostrum atque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quis pariatur totam nostrum explicabo doloremque quaerat! Ipsum odit dolor ut corrupti hic quae provident voluptates saepe commodi, id culpa praesentium?</p>
<section class="leaked block">
<div class="container">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut accusantium doloribus aspernatur laboriosam! Voluptatem blanditiis doloremque earum ab alias, modi repudiandae eveniet autem fugiat facilis ducimus? Veniam laboriosam nobis ab!
</p>
</div>
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque voluptates voluptas eveniet suscipit fugiat. Quidem nesciunt ducimus veritatis, sed repudiandae perferendis nam fugiat! Laborum minus consequatur hic. Ut, dolorum facilis.</p>
<div class="force-scroll">This is only to force an scroll</div>
</article>
According to documentation
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they have scaled accordingly.
However, when the value of overflow on the root element is auto, any
scrollbars are assumed not to exist.
So there is no way to without js to get width without scrollbars :(
It's the width on .leaked. I changed the width from 100vw to 100% and the image reduces in size so it now fits in the container.
.leaked {
width: 100%;
//other styles
}
But if you do want the leaked content to go full width you need to change your html structure so .leaked sections are not inside the container, that way it will go full width:
<article class="container">
<header>
<h1>Article title</h1>
<small>To see in action, use and 1024px wide screen or larger</small>
</header>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore quaerat quos ex quo laborum officiis maxime molestias cum omnis. Veritatis quas, molestiae nihil soluta inventore provident minus nostrum atque!</p>
</article>
<figure class="leaked">
<img src="http://via.placeholder.com/1920x800" alt="Example figure" width="1920" height="800">
<figcaption>An example figure</figcaption>
</figure>
<article class="container">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore quaerat quos ex quo laborum officiis maxime molestias cum omnis. Veritatis quas, molestiae nihil soluta inventore provident minus nostrum atque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quis pariatur totam nostrum explicabo doloremque quaerat! Ipsum odit dolor ut corrupti hic quae provident voluptates saepe commodi, id culpa praesentium?</p>
</article>
<section class="leaked block">
<div class="container">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut accusantium doloribus aspernatur laboriosam! Voluptatem blanditiis doloremque earum ab alias, modi repudiandae eveniet autem fugiat facilis ducimus? Veniam laboriosam nobis ab!
</p>
</div>
</section>
<article class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque voluptates voluptas eveniet suscipit fugiat. Quidem nesciunt ducimus veritatis, sed repudiandae perferendis nam fugiat! Laborum minus consequatur hic. Ut, dolorum facilis.</p>
<div class="force-scroll">This is only to force an scroll</div>
</article>