Image disappears if a responsive ratio is applied while it's nested in a flexbox

[msrumon]

Overview of the problem

• This is about the Bulma CSS framework
• I'm using Bulma version 0.9.3
• My browser is: Chrome

Description

When I apply a responsive image ratios (is-XbyX classes) to an element having image class, and that element is nested in a flexbox (direct child), the image is disappeared.

Steps to Reproduce

Below is a sample snippet:

<section class="is-flex is-justify-content-space-between p-6">
  <figure class="image is-1by1">
    <img src="https://bulma.io/images/placeholders/256x256.png">
  </figure>
  <figure class="image is-1by1">
    <img src="https://bulma.io/images/placeholders/256x256.png">
  </figure>
</section>

Expected behavior

Images should respect the responsive behavior.

Actual behavior

Images are disappeared.

[emkajeej]

This is because flex items do not have an explicit size. Fixe by making the .image elements flex items (eg flex: 1).

Related, the .image component forces aspectratios by adding a percentual padding-top. Nowadays the css property aspect-ratio could be used with full browser support, except IE11.

[TheWalkingSea]

This is because flex items do not have an explicit size. Fixe by making the .image elements flex items (eg flex: 1).

Related, the .image component forces aspectratios by adding a percentual padding-top. Nowadays the css property aspect-ratio could be used with full browser support, except IE11.

Can you elaborate

[emkajeej]

On what part?