html - 为什么溢出: hidden affect width

Question

在下面的代码中，在 #content 规则中，overflow:hidden 做了一些魔术来自动调整 div 的 width。我尝试在 #content 中手动将宽度设置为某个值，例如 10000px，但宽度不起作用。宽度由我使用 overflow:hidden|scroll|auto 决定。

我只是想知道为什么 overflow:hidden 如此神奇？

我对 overflow:hidden 可能启动 BFC 的可能性进行了一些研究。但是 display:flex 具有 BFC 相同的效果。

更具体地说，我最初的尝试是让 #content 中的所有文本逐行省略。我发现在 #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; 将占用容器内剩余的空间。我已经缩小了容器给你看。