0

I've got an image embedded in a div as follows, however, the div renders with the incorrect width (testing in Safari on MacOS). It seems like the issue resolves itself when I remove div d with the margin-left of 20px.

enter image description here enter image description here

.a {
width: 75px;
height: 75px;
}

.b {
width: 100%;
height: 100%;
border-radius: 10px;
}

.c{ 
display: flex;
flex-direction: row;
width: -webkit-fill-available;
}

.d { 
display: flex;
flex-direction: column;
width: -webkit-fill-available;
margin-left: 20px;
}

.e { 
display: flex;
flex-direction: row;
-webkit-box-pack: justify;
justify-content: space-between;
}
<div class="e">
<div class="c">
<div class="a"><img src="https://minimalistbaker.com/wp-content/uploads/2019/07/EASY-1-Pot-Massaman-Curry-Basic-ingredients-BIG-flavor-lots-of-protein-options-for-vegan-vegetarian-and-meat-eaters-plantbased-glutenfree-curry-massaman-recipe-minimalistbaker-34.jpg" class="b"><div class="d"></div></div></div></div>
Alk
  • 5,215
  • 8
  • 47
  • 116

0 Answers0