Question

为什么以下示例中的元素会自行崩溃？

即使元素设置为box-sizing: border-box，它的边框也会保留，但是一旦元素突破其父元素的边界，元素就会丢失所有宽度。

发生了什么事？

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;
}

<body>
  <section>
    <div id="statement-container"></div>
    <div id="caret"></div>
  </section>
</body>

Answer 1

为什么以下示例中的元素会自行崩溃？

当您在section上使用 display: flex 时，其子项将成为弹性项目。

Flex项目有一个名为 flex 的属性，它是 flex-grow，flex-shrink和flex-basis 的简写，根据可用空间及其内容控制项目大小本身。

flex-basis，在本例中是 flex row direction ，这是默认值，用于控制项目的宽度。

默认值为flex: 0 1 auto，表示它不会增长（0）超出其内容，允许缩小（ 1）及其 flex-basis （auto）根据其内容调整大小。

因为在这种情况下 width and 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>

Answer 2

您可以在父项外部为0之后设置min-width: 10%;元素计算宽度，因为语句容器占用了100％的可用空间。如上所述here：

min-width CSS属性设置元素的最小宽度。它防止width属性的使用值变小比为min-width指定的值。

＆＃13;

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)

＆＃13;

* {
  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%;
}

＆＃13;

<body>
  <section>
    <div id="statement-container"></div>
    <div id="caret"></div>
  </section>
</body>

＆＃13;

Answer 3

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>

一旦元素突破父母的宽度，元素就会丢失所有宽度

3 个答案: