Menu
Why does the element in the following example collapse in on itself?
Even though the element is set to box-sizing: border-box, its border will remain, yet the element loses all of its width as soon as it breaches the perimeter of its parent.
What is going on?
CODEPEN
let t = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at velit commodo, facilisis ex vitae, viverra tellus.'
let c = 0
const e = document.getElementById('statement-container')
const i = setInterval(function(){
if (t[c] !== ' ') e.innerHTML += t[c]
else e.innerHTML += ' '
c++
if (c >= t.length) clearInterval(i)
}, 100)* {
box-sizing : border-box;
}
body {
width : 100vw;
height : 100vh;
margin : 0;
}
section:first-child {
width : 40vw;
height : 100vh;
position : relative;
left : 30vw;
display : flex;
border : solid blue 1px;
}
#statement-container, #caret {
height : 15%;
position : relative;
top : calc(50% - 7.5%);
}
#statement-container {
z-index : 98;
font-family : beir-bold;
font-size : 6.5vmin;
color : red;
}
#caret {
z-index : 99;
width : 10%;
border : solid green 5px;
background : orange;
}<body>
<section>
<div id="statement-container"></div>
<div id="caret"></div>
</section>
</body>
581
Its width will be worked out based on the pixel width of its content and will be calculated after the contents are rendered. So at the point, IE encounters and renders your relatively positioned div its parent has a width of 0 hence why it itself collapses to 0.
To convert it to a fixed-width layout, simply add a fixed with to the #wrapper and set the margins to auto. Setting the margins to auto will cause the left and right margins to be equal no matter how wide the browser window is, which will cause your fixed-width layout to be positioned in the center of the browser.
It CAN have a wider width by giving both elements explicit widths, obv with the inner element being wider, and the parent element using overflow: visible; so that the child element's content can be seen. You could also give the child element a negative margin to bump it outside of its container's bounds.
The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.
Why does the element in the following example collapse in on itself?
As you are using display: flex on the section, its children becomes flex items.
Flex items has a property called flex, which is shorthand for flex-grow, flex-shrink and flex-basis, which control how the item size itself based on available space and its content.
The flex-basis, in this case in a flex row direction, which is the default, controls the items width.
The default value is flex: 0 1 auto which mean it won't grow (0) beyond its content, it is allowed to shrink (1) and its flex-basis (auto) size it according to its content.
Since in this case width and flex-basis do the same, here giving the caret an set width of 3%, it will keep that width as long as there is enough space, and won't grow, but when the space becomes negative (items won't fit anymore) it will start shrink down to its content width, which it doesn't have any, hence its content area collapse completely.
One solution would be to tell it to not be allowed to shrink, by changing flex-shrink to 0.
let t = 'Nothing is completely perfect.'
let c = 0
const e = document.getElementById('statement-container')
const i = setInterval(function(){
if (t[c] !== ' ') e.innerHTML += t[c]
else e.innerHTML += ' '
c++
if (c >= t.length) clearInterval(i)
}, 100)* {
box-sizing : border-box;
}
body {
width : 100vw;
height : 100vh;
margin : 0;
}
section:first-child {
width : 40vw;
height : 100vh;
position : relative;
left : 30vw;
display : flex;
border : solid blue 1px;
}
#statement-container, #caret {
height : 15%;
position : relative;
top : calc(50% - 7.5%);
}
#statement-container {
font-family : beir-bold;
font-size : 15vmin;
color : red;
}
#caret {
flex-shrink : 0; /* added */
width : 5%;
border : solid green 5px;
background : orange;
} <section>
<div id="statement-container"></div>
<div id="caret"></div>
</section>You can set min-width: 10%; the element calculated width after going outside the parent is 0 because the statement container is taking 100% of the available space. As stated here:
The min-width CSS property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.
let t = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at velit commodo, facilisis ex vitae, viverra tellus.'
let c = 0
const e = document.getElementById('statement-container')
const i = setInterval(function(){
if (t[c] !== ' ') e.innerHTML += t[c]
else e.innerHTML += ' '
c++
if (c >= t.length) clearInterval(i)
}, 100)* {
box-sizing : border-box;
}
body {
width : 100vw;
height : 100vh;
margin : 0;
}
section:first-child {
width : 40vw;
height : 100vh;
position : relative;
left : 30vw;
display : flex;
border : solid blue 1px;
}
#statement-container, #caret {
height : 15%;
position : relative;
top : calc(50% - 7.5%);
}
#statement-container {
z-index : 98;
font-family : beir-bold;
font-size : 6.5vmin;
color : red;
}
#caret {
z-index : 99;
width : 10%;
border : solid green 5px;
background : orange;
min-width: 10%;
}<body>
<section>
<div id="statement-container"></div>
<div id="caret"></div>
</section>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
