0

I have a container that is using flex. I want to have an image on the left and a quote on the right with 15px of margin between them. Unfortunately, the flex property seems to be overriding the specified width of the image I have set:

.container {
  width:400px;
}
.quote-container {
  display:flex;
  flex-direction:row;
}
.image-container {
  display:block;
  width:64px;
  height:64px;
  border-radius:50%;
  overflow:hidden;
  margin-right:15px;
}
<div class="container">
  <div class="quote-container">
    <div class="image-container"><img src="http://placehold.it/64x64" /></div>
    <div class="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quam ex, commodo et massa quis, molestie dignissim orci. Praesent nec lectus et magna aliquam iaculis. Curabitur imperdiet ipsum sed nisi efficitur varius. Sed euismod urna in ipsum commodo, nec posuere diam fringilla.</div>
  </div>
</div>

How can I change this CSS so that the image remains 64px and then quote fills in the remaining space?

user13286
  • 3,027
  • 9
  • 45
  • 100

0 Answers0