長文本打破我的flexbox佈局

Question

我有兩列。

在我的左欄中我有一個p標籤。

這個p標籤有很多文字，並且在我的專欄之外非常廣泛。

當我刪除我的p標記列布局看起來很好。

我試過在p標籤上設置max-width，但是這不是很好的迴應。我希望p標記是col div的100％寬度。

我希望文字的寬度達到100％並很好地包裹。

.wrapper { 
 
    display: flex; 
 
    flex: 1 0 auto; 
 
} 
 

 
.col { 
 
    flex: 1 0 auto; 
 
} 
 

 
p { 
 
    max-width: 100px; /* I dont want to do this. */ 
 
}

<div class='wrapper'> 
 
    <div class='col'> 
 
    <p>small amount of text</p> 
 
    </div> 
 

 
    <div class='col'> 
 
    <p>text very long text very longtext very long text very long text very long text very long text very long text very long text very long text very long text very long text very long. 
 
    </p> 
 
    </div> 
 
</div>

Answer 1

你有flex-shrink禁用。激活它。

.wrapper { 
 
    display: flex; 
 
} 
 

 
.col { 
 
    flex: 1 1 auto; /* flex-grow, flex-shrink, flex-basis */ 
 
}

<div class='wrapper'> 
 
    <div class='col'> 
 
    <p>small amount of text</p> 
 
    </div> 
 
    <div class='col'> 
 
    <p>text very long text very longtext very long text very long text very long text very long text very long text very long text very long text very long text very long text very long. 
 
    </p> 
 
    </div> 
 
</div>

隨着flex-shrink禁用，彎曲的物品是不會退縮的。 （flex項目經常不收縮的另一個原因是默認爲min-width: auto/min-height: auto。Why doesn't flex item shrink past content size?）