长文本破坏了我的 flexbox 布局

Question

我有两列。

在我的左栏中，我有一个p标签。

这个p标签有很多文本，而且非常广泛并且超出了我的专栏。

当我删除我的p标签时，列布局看起来不错。

我试过max-width在p标签上设置 a但这不是很好的响应。我希望p标签是coldiv 的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禁用，弯曲的物品是不会退缩的。（弹性项目通常不收缩的另一个原因是min-width: auto/min-height: auto默认。为什么弹性项目不收缩超过内容大小？）