Why does overflow: hidden affect width

Question

In the following code, in rules, overflow:hidden does some magic to auto adjust the width for the div. 规则中， overflow:hidden会自动调整div的width 。 I tried to manually set width to a certain value such as 10000px in but the width doesn't work. 手动将宽度设置为某个值，例如10000px，但宽度不起作用。 The width is determined if I use overflow:hidden|scroll|auto .

I'm just wondering why overflow:hidden does the magic?

I've made some study on the possibility that overflow:hidden may start a BFC. But display:flex has the same effect of BFC.

To be more specific, my original attempt was to let all text in ellipsis line by line. 省略号中的所有文本逐行。 And I found that setting the width in does the work correctly. 中设置width可以正常工作。 But I accidentally found that I can do the same by overflow:hidden without setting a width. So why is that work?

 #container { padding: 12px; display: flex; } #leftblock { width: 100px; height: 100px; background-color: #ccc; } #content { margin-left: 10px; display: flex; flex-direction: column; flex: 1; overflow: hidden; } p { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin: 8px 0; } 

 <div id="container"> <div id="leftblock"></div> <div id="content"> <p><b>This div will take the rest of the available width, and the <code>overflow:hidden;</code> makes sure this text doesn't fall below the <code>#floated</code> div.</b></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt vestibulum magna, nec rutrum lacus lobortis at. Duis convallis tincidunt neque eu viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum faucibus mauris, pretium varius dui tempor tempor. Aenean in elit dolor, a pellentesque urna. Vestibulum egestas metus id massa elementum quis posuere nunc tincidunt. Curabitur dapibus dictum lacus a fermentum.</p> <p>Quisque cursus gravida sem quis pretium. Cras cursus, neque sit amet bibendum ornare, nunc mi euismod ligula, ut cursus enim risus nec mi.</p> </div> </div> 

Answer 1

Fully Updated:

 #container { width:500px; padding: 12px; display: flex; flex-wrap: wrap; } #floated { width: 100px; height: 100px; background-color: #ccc; } #content { margin-left: 10px; display: flex; flex-direction: column; flex: 1; } p { text-overflow: ellipsis; margin: 8px 0; } 

 <div id="container"> <div id="floated"></div> <div id="content"> <p><b>This div will take the rest of the available width, and the makes sure this text doesn't fall below the <code>#floated</code> div.</b></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt vestibulum magna, nec rutrum lacus lobortis at. Duis convallis tincidunt neque eu viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum faucibus mauris, pretium varius dui tempor tempor. Aenean in elit dolor, a pellentesque urna. Vestibulum egestas metus id massa elementum quis posuere nunc tincidunt. Curabitur dapibus dictum lacus a fermentum.</p> <p>Quisque cursus gravida sem quis pretium. Cras cursus, neque sit amet bibendum ornare, nunc mi euismod ligula, ut cursus enim risus nec mi.</p> </div> </div> 

UPDATED: You determine the width through .container because flex:1; will take up the space that is left within container. I have shrunk down the container to show you.