Element loses all of its width as soon as it breaches parent's width
Question
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?
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>
3 answers
solution1
5 ACCPTED 2017-10-09 10:06:36
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>
solution2
2 2017-10-09 06:43:51
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>
solution3
-3 2017-10-09 06:51:49
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 : 100vw; 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.