如何使 flex-wrap 与 flex-basis 一起工作？

Question

我在父 div 中有两个 div。第一个 div 有一个绝对定位的图像，而另一个有一些文本内容。我想要包装父 div 的内容。所以这是我设置的：

.item-content {
  display: flex;
  flex-wrap: wrap;
}

.image-container {
  flex-basis: 48%;
  position: relative;
  border: 2px solid red;
}

.image {
  display: block;
  position: absolute;
  left: -100px;
}

.text-content {
  margin: 0px auto;
  flex-basis: 43%;
}

<div className="item-content">
  <div className="image-container">
    <img src={desktopImage} alt="" className="image " />
  </div>
  <div className="text-content">
    <h2>{title}</h2>
    <p>{subtitleText}</p>
    <div className="divider" />
    <h5>The challenge</h5>
    <p className="description">{description}</p>
  </div>
</div>

但是，当屏幕尺寸发生变化时，这不会使内容换行。如何使“文本内容”类换行？

Answer 1

如果您希望 <div class="text-content"> 中的所有内容都进行换行，那么您只需将 flex-wrap 属性添加到其中的所有元素即可。

.text-content *{
    display:flex;
    flex-wrap:wrap;
}