爲什麼溢出：隱藏影響寬度

Question

在下面的代碼中，在＃內容規則中，overflow:hidden做了一些魔術來自動調整div的width。我嘗試在＃內容中手動將寬度設置爲某個值，例如10000px，但寬度不起作用。如果我使用overflow:hidden|scroll|auto，則確定寬度。

我只是想知道爲什麼overflow:hidden做的神奇？

我已經對overflow:hidden啓動BFC的可能性做了一些研究。但display:flex具有BFC的相同效果。

更具體地說，我最初的嘗試是讓#content中的所有文字一行一行省略號。我發現在中設置width＃內容可以正常工作。但我意外地發現，我可以通過overflow:hidden來做同樣的事情，而不需要設置寬度。那麼，爲什麼這項工作？

#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

完全更新：

#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>

更新：您確定通過.container的寬度，因爲flex:1;會佔用即容器內留下的空間。我縮小了容器以展示給你。