Why Can't My Inline Block Elements Size to Parent?

[learis]

Hello, I’m very new to Webflow, and I’m stuck with this basic layout problem.

I have a parent section. I inserted an inline block image, and an inline div block. I set the section height to 60% of viewport height. Then I set the image and div to 100% parent height (which should be the section’s height). When I do this, the image seems to glitch out and lower itself for no reason. I have a readonly link. The viewport is outlined in red while the image and div are outlined in black.

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[Lux (Luke Dorny)]

I’m not sure, but if you choose display: flexbox for the Section (parent), everything is solved. Hope that helps, and doesn’t send you down a flexbox rabbit-hole journey.

[learis]

I’m not using flexbox. I want to know why this doesn’t work.

[Lux (Luke Dorny)]

Understood. It’s possible you’ve found a bug.
It appears images are set to display: inline-block by default. Perhaps DIVs and IMGs show differently when set to display:inline-block. Likely the CSS reset being used by Webflow? Not sure.
Sorry that I can’t help out here.

[learis]

Ok, I’ve found a workaround. I just have to put a div parent for the image, set the div display to inline-block, and set the image display to block.