长文本破坏了我的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>

- AngularM

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 项目不会收缩。(flex 项目通常不会收缩的另一个原因是默认的min-width: auto / min-height: auto。关于这个问题的更多信息请查看为什么 flex 项目无法收缩到内容大小以下？)

- Michael Benjamin

---

谢谢你提醒我关于“flex项目不能收缩到内容大小”的问题，帮了我大忙！ - Quang Van