为什么溢出：隐藏影响宽度

Question

In the following code, in rules, overflow:hidden does some magic to auto adjust the width for the div. I tried to manually set width to a certain value such as 10000px in but the width doesn't work. 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. 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.