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>

score 0 · Accepted Answer · answered Oct 30 '15 at 14:58

0

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.

answered Oct 30 '15 at 14:58

leuquim

636
6
16

The `display: initial` is a nice find. It works in both Firefox and Chrome although I didn't test Edge yet (it's in _preview_ status). Any idea why it works, I didn't alter the `display` property, so I'd think it'd be the same as `initial`? – sluijs Oct 30 '15 at 15:12
Taken from W3.org: "Certain elements are said to be sectioning roots, including blockquote and td elements. These elements can have their own outlines, but the sections and headings inside these elements do not contribute to the outlines of their ancestors." http://www.w3.org/TR/html5/sections.html#sectioning-root So, basically a figure element works in a different way than a standard div, and therefore doesn't act like a box. The problem with inconsistencies may come down to how each browser styles this element by default. – leuquim Oct 30 '15 at 15:31

Figure elements inside columns fail on max-height

1 Answers1