长文本打破我的flexbox布局

问题描述：

在我的左栏中我有一个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>

答

你有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?）

长文本打破我的flexbox布局

相关推荐