Почему переполнение: скрытое влияние ширины

Question

В следующем коде, в #content правила, overflow:hidden делает некоторые магии для автоматической настройки width для div. Я попытался вручную установить ширину до определенного значения, например, 10000px в #content, но ширина не работает. Ширина определяется, если я использую overflow:hidden|scroll|auto.

Мне просто интересно, почему overflow:hidden делает магию?

Я изучил возможность того, что overflow:hidden может начать BFC. Но display:flex имеет тот же эффект от BFC.

Чтобы быть более конкретным, моя первоначальная попытка состояла в том, чтобы оставить весь текст в #content ellipsis line by line. И я обнаружил, что установка width в #content делает работу правильно. Но я случайно обнаружил, что могу сделать то же самое 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; будет занимать пространство, которое осталось в контейнере. Я сжал контейнер, чтобы показать вам.