How do you make text flow below an image?-CodePudding

In my html, I have this:

<section class="mysection">
  <img src="/images/pic.png"/>
  <div class="content">
    <p class="paragraph">
     some paragraphs here....
    </p>
  </div>
</section>

In my CSS,

.mysection{
  display: flex;
  flex-direction: row;
}

.paragraph {
  display: flex;
  flex-direction: column;
}

.content {
  padding: 20px;
}

.mysection img{
     border-radius: 50%;
     width: 200px;
     height:200px;
}

This produced an image on the left, text on the right, like this:

But you can see, if the paragraph gets longer, it would just keep flowing downward, and push the image to be smaller. Is there a way to make it so that if the paragraph gets longer, it would just flow and fill without pushing the image smaller? This is what I mean:

Any help is appreciated, thanks !

CodePudding user response：

A straightforward way of getting text to flow under the image would be to remove the use of flex with its columns and instead float the image to the left.

.content {
  padding: 20px;
}

.mysection img {
  width: 100px;
  height: 100px;
  float: left;
  margin-right: 10px;
  background-color: lightblue;
}

<section class="mysection">
  <img src="/images/pic.png" />
  <div class="content">
    <p class="paragraph">
      some paragraphs here...."Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>
  </div>
</section>