How would I make images shrink with flexbox?

Question

I'm having trouble figuring out how to make my code mobile friendly; the PC version seems fine, but on mobile it stretches the bio and some text will run off the page. I can't figure a way to have the picture shrink when it's displayed on mobile, and have the content nicely boxed to the side. Any advice would be appreciated and thanks in advance.

Mobile:

Computer:

div.readerone {
  display: flex;
  align-items: center;
}

p.right {
  border-radius: 5px!important;
  border: 1px ridge #AA9DE0;
  background-color: #E1E0FF;
  padding: 10px;
  margin-left: 20px;
}

<div class="readerone"><img src="https://image.ibb.co/fvO800/csongor-daniel- 
    hs-10-14-2015-016.jpg" alt="csongor-daniel-hs-10-14-2015-016" width="210" height="300" border="0" />
  <p class="right">bio desc.</p>
</div>

Answer 1

You must set % width to your children elements:

div.readerone {
  display: flex;
  align-items: center;
}

div.readerone img { 
  width: 50%;
  object-fit: contain;
}

p.right {
  width: 50%;
  border-radius: 5px!important;
  border: 1px ridge #AA9DE0;
  background-color: #E1E0FF;
  padding: 10px;
  margin-left: 20px;
}

<div class="readerone"><img src="https://image.ibb.co/fvO800/csongor-daniel- 
    hs-10-14-2015-016.jpg" alt="csongor-daniel-hs-10-14-2015-016" width="210" height="300" border="0" />
  <p class="right">bio desc.</p>
</div>

But on mobile you should move your image over text or below, and have image on 100% width and text on 100% width:

div.readerone { 
  display: flex;
  flex-direction: column;
}