flex column 和 wrap 会让 flex-item 溢出

Question

我想用最少的html标签

实现的简单布局

只有<img> & <h1> & <p> 没有其他额外的标签

flex + column + wrap

第一列只有一张图片

第二列包含标题和填字游戏

父层的宽高是固定的

结果是部分文字会溢出

只为<p>添加宽度以防止

有没有什么办法可以在不增加宽度的情况下自动分行？

HTML

*{
      margin: 0;
      padding: 0;
    }
    .out{
      width: 600px;
      height: 200px;
      border: 1px solid #ccc;
      padding: 20px;
      margin: 50px auto;
      font-family: Verdana;

      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
    }
    img{
      /* margin-bottom: 20px; */
      margin-right: 20px;
    }
    p{
      line-height: 1.6;
      overflow-wrap: break-word;
    }

<div class="out">
    <img src="https://picsum.photos/id/230/200/200" alt="">
    <h1>This is Title</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta iure iusto cupiditate sequi aperiam, nostrum optio ipsam dicta modi officiis eligendi vel. Dignissimos delectus exercitationem nemo. Enim id sed corrupti!</p>
</div>

Answer 1

根据您的期望的另一种解决方案：

* {
  margin: 0;
  padding: 0;
}

.out {
  width: 600px;
  height: 200px;
  border: 1px solid #ccc;
  padding: 20px;
  margin: 50px auto;
  font-family: Verdana;
  display: flex;
}

img {
  /* margin-bottom: 20px; */
  margin-right: 20px;
}

p {
  line-height: 1.6;
  overflow-wrap: break-word;
  margin-left: -200px;
  margin-top: auto;
  margin-bottom: auto;
}

h1 {
  position: relative;
  white-space: nowrap;
}

p::before {
  content: "";
  width: 100%;
}

<div class="out">
  <img src="https://picsum.photos/id/230/200/200" alt="">
  <h1>This is Title</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta iure iusto cupiditate sequi aperiam, nostrum optio ipsam dicta modi officiis eligendi vel. Dignissimos delectus exercitationem nemo. Enim id sed corrupti!</p>
</div>

Answer 2

这是我的解决方案

* {
  font-family: 'poppins';
}

.card {
  display: flex;
  padding: 15px;
  border: 1px solid #8f8f8f;
}

.content {
  margin-left: 10px;
}

.content h6 {
  margin-top: 0;
  font-size: 32px;
  margin-bottom: 5px;
}

<div class="card">
  <img src="//via.placeholder.com/150">
  <div class="content">
    <h6>This is title</h6>
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
      here, content here', making it look like readable English.</p>
  </div>
</div>