html - 长文本破坏了我的 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 元素将不会收缩。 ( flex 元素通常不收缩的另一个原因是 min-width: auto/min-height: auto 默认值。 Why doesn't flex item shrink past content size? )