這個問題在這里已經有了答案： 了解如何在嵌套的 flex 容器中計算滾動條的寬度 1 個回答 8 小時前關閉。
我有一個文本剪切問題，即使它們的 flex-basis 設定為 0，也過早地剪切 flex 專案，所以我希望 flex 容器拉伸所有專案至少與容器中最大的專案一樣大。無論如何，這是一個小提琴：
https://jsfiddle.net/nxbwufLk/
它是如何選擇包裝文本的？為什么不拉伸第一項。
.button {
flex: 1 1 0;
border: 1px solid red;
}
.container {
display: inline-flex;
}<div class="container">
<div class="button">
Some text
</div>
<div class="button">
Some text that is very long indeed
</div>
</div>我可以看到第二個文本已換行，但這是如何決定的？任何地方都沒有設定寬度
uj5u.com熱心網友回復：
我可以看到第二個文本已換行，但這是如何決定的？任何地方都沒有設定寬度
有一個寬度集，它不是微不足道的注意，你正在使用inline-flex它自己應該告訴你發生了什么。
容器的寬度將等于它的內容，在這種情況下，兩個元素的文本寬度。
演示
顯示代碼片段
.button {
border: 1px solid red;
}
.container {
display: inline-flex;
}
.test>.button {
flex: 1 1 0;
}No flex properties set
<br/>
<div class="container">
<div class="button">
Some text
</div>
<div class="button">
Some text that is very long indeed
</div>
</div>
<br/>
<br/>
<br/> flex properties set
<br/>
<div class="container test">
<div class="button">
Some text
</div>
<div class="button">
Some text that is very long indeed
</div>
</div>如您所見，容器的寬度是相同的。
現在無論我們做什么，容器的寬度都已設定并且不會改變，因此當您應用時，flex: 1 1 0;您只需將該寬度（均勻flex-basis:0;）劃分在兩個元素之間，然后您就可以得到包裝。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/401875.html
下一篇：svg上的背景大小