[英]Element loses all of its width as soon as it breaches parent's width
为什么以下示例中的元素会自行折叠？
即使元素设置为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 += ' ' 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>
为什么以下示例中的元素会自行折叠？
当您使用display: flex on the section ，其子项将成为flex项。
Flex项目有一个名为flex的属性，它是flex-grow ， flex-shrink和flex-basis简写，它根据可用空间及其内容控制项目大小本身的方式。
flex-basis ，在这种情况下是弹性行方向 ，这是默认值，控制项目宽度。
默认值为flex: 0 1 auto表示它不会增长 （ 0 ）超出其内容，允许缩小 （ 1 ）及其flex-basis （ auto ）根据其内容调整大小。
因为在这种情况下width和flex-basis相同，这里给予caret设置宽度为3％，只要有足够的空间就会保持该宽度，并且不会增长，但是当空间变为负时（项目将不再适合）它将开始缩小到其内容宽度，它没有任何内容宽度，因此其内容区域完全崩溃。
一种解决方案是通过将flex-shrink更改为0来告诉它不被flex-shrink 。
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>
你可以设置min-width: 10%; 在父项之外的元素计算宽度为0，因为语句容器占用了100％的可用空间。 如前所述这里 ：
min-width CSS属性设置元素的最小宽度。 它可以防止width属性的used值小于为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>
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>
使元素的宽度取决于其祖父母的动态宽度-父元素的宽度固定
[英]Make an element's width depend on its grandparent's dynamic width--while having a fixed width parent
将元素的宽度设置为其父级的宽度加上其父级的填充
[英]Set width of element to the width of its parent plus the padding of its parent
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.