Figure elements inside columns fail on max-height

Question

Images can be scaled inside columns to the column-height and column-width, with CSS max-width and max-height properties. But when images are placed inside <figure> tags, max-width seems to be working, but max-height fails^[1].

I demonstrated it here in this fiddle^[2]. Example 4 shows the correct behavior, and example 3 fails inconsistently across different browsers. What would be an appropriate fix?

---

^[1]In Firefox it creates an overflow-y: scroll in the whole containing div. Chrome Canary shows the image scaled to the max-width broken down over several columns. In Safari 9 it does show the desired result.

---

^[2] Excerpt of the code concerning the issue:

div { 
  column-width: 150px;
  height: 50px;
  width: 400px;
  overflow: scroll;
  background: red;
}

img {
  max-height: 100%;
  max-width: 100%;   
}

figure { 
  background: blue;
  max-height: 100%;
  max-width: 100%;
}

<div>
  <figure>
    <img src="image_larger_than_column_height_and_width.jpg" alt="">
  </figure>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi doloremque eum iure impedit molestias dolor recusandae perferendis fuga culpa, atque rerum, aliquid, vitae porro molestiae tempora rem corporis ab nulla.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus officiis quia ab possimus vel. Doloremque distinctio id, debitis cum esse, adipisci impedit eligendi, quam voluptatum quod suscipit modi fugit molestiae!</p>
  <p>Ipsa harum quas pariatur velit ullam cupiditate sunt animi id? Maxime maiores facilis dolorem aperiam nulla vero, ut fuga blanditiis molestias veritatis repudiandae esse cum tempore. Magni, molestias officiis. Saepe.</p>
  <p>Sequi perspiciatis at aut, ex iusto rerum iste aperiam magnam consequatur nam, eius esse fuga perferendis. Quia eum minus consequuntur. Aliquam obcaecati ullam corporis amet velit numquam, accusantium odit facere?</p>
  <p>Aliquid unde iure cumque iusto illum saepe corporis assumenda esse perferendis rem quibusdam, ab eaque omnis tenetur possimus maiores voluptatem quaerat dignissimos reiciendis at delectus. Recusandae illo vero nemo doloremque!</p>
  <p>Praesentium voluptas totam enim non. Vel, quasi quo minima ea ratione corporis facere eligendi. Aspernatur doloremque quos, explicabo eius. Sequi cupiditate explicabo rem voluptatem quidem doloremque enim quo, officia dolorem!</p>
</div>   

Answer 1

I would set "figure" to have precise dimensions, that is, changing "max-width" and "max-height" to "width" and "height".

Also, setting "figure" to "display: initial" seems to replicate the 4th example.