img-in-flex-parent

by BN W

HTML

<h4>img 160x160</h4>
<div class="flex">
  <img src="https://fakeimg.pl/160x160/"
  width="160" height="160"
  alt="160x160 image" class="item">
</div>

<h4>canvas 160x160</h4>
<div class="flex">
  <canvas width="160" height="160" class="item">
</div>

CSS

.flex {
  display: flex;
  width: 80px;
  
  border: 3px dashed #000;
}

.item {
  height: auto;
  /* margin: auto; */
  
  /* align-self: flex-start; */
  
  display: block;
  max-width: 100%;
  background: orange;
}