Here's a current look at the elements related to my query: Flexbox Layout
I'm aiming to have the text inside the unordered-list elements wrap to the next line if it's too long. Currently, the entire list moves to a new line (refer to the 2nd example in the linked image).
My goal is to keep the list right beside the image on the same row (unless a media query triggers flex-direction: column).
Any suggestions for possible solutions?
.team-row {
display: -webkit-flex;
/* Safari */
-webkit-flex-flow: row wrap;
/* Safari 6.1+ */
display: flex;
flex-flow: row wrap;
margin-top: 1em;
border: 1px solid #efefef;
padding: 5px;
}
.team-header {
padding: 8px;
background-color: #F6B80B;
width: 100%;
}<div class="team-row">
<strong class="team-header">Wolfgang Niepel</strong>
<img class="team-image" src="http://wp.fahrschuleniepel.de/wp-content/uploads/2018/09/image.png" alt="Wolfgang Niepel" width="100" height="133">
<ul class="team-description">
<li>Driving instructor since: 1964</li>
<li>self-employed since: 1968</li>
<li>other: Founded Fahrschule Niepel on 01.12.1968.</li>
</ul>
</div>
<div class="team-row">
<strong class="team-header">Jens Niepel</strong>
<img class="team-image" src="http://wp.fahrschuleniepel.de/wp-content/uploads/2018/09/jens_niepel_100.jpg" alt="Jens Niepel" width="100" height="133">
<ul class="team-description">
<li>Driving instructor since: 1983</li>
<li>at Fahrschule Niepel since: 1983</li>
<li>other: Since 2001, I have been managing our office and I am the contact person for all questions regarding your training.</li>
</ul>
</div>