如何使柔性包装工作与柔性基础?

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;
}