Geek Answers Handbook

An element loses its entire width as soon as it breaks the parent width.

Why does the element in the following example collapse on its own?

Even if a value is set for an element box-sizing: border-box, its border will remain, but the element loses its entire width as soon as it breaks the perimeter of its parent.

What's happening?

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>
Run code
+6
source share
3 answers

Why does the element in the following example collapse on its own?

When you use display: flexin section, its children become flexible.

Flex flex, flex-grow, flex-shrink flex-basis, , .

flex-basis, , .

flex: 0 1 auto, , (0) , (1) flex- (auto) .

width flex-basis , , caret ​​ 3%, , , ( ), , , .

, , flex-shrink 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 += '&nbsp;'
  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>
+5

min-width: 10%; 0, 100% . :

min-width CSS . 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 += '&nbsp;'
  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>
+2

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 += '&nbsp;'
  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>
Run code
-3
source

More articles:


All Articles