Inline block in Firefox does not scale down to contents - html

Question

I have two columns, both 50% of the screen-width. The left column is filled with text, the right column has an image that scales to the height of the text. Another image is placed over this first image, positioned in the bottom right corner. Even if the screen-width exceeds the image-width (and whitespace appears to the right of the image), the second image should stay aligned to the bottom right corner of the first one.
The setup you can see in the code below works in browsers other than Firefox. In Firefox, the second image is positioned as far right as possible, up to the original width of the first image. I think I've narrowed it down to the 100% height I give .image div, if I use a fixed height (i.e. 400px), the second image is aligned correctly. I need the percentage height though, to let the first image scale to the text height.
.wrapper {
overflow: hidden;
position: relative;
}
.text {
width: 50%;
position: relative;
}
.image {
width: 50%;
position: absolute;
left: 50%;
top: 0;
bottom: 0;
}
.image div {
position: relative;
display: inline-block;
vertical-align: top;
height: 100%;
max-width: 100%;
overflow: hidden;
}
.image div:after {
content: url("https://vignette1.wikia.nocookie.net/uncyclopedia/images/6/67/Marvin_the_martian.jpg");
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 120px;
}
.image>div>img {
display: block;
height: 100%;
width: auto;
}
<div class="wrapper">
<div class="text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel enim vulputate, luctus dolor vel, efficitur ante. Maecenas eget massa eu mi varius posuere vel mattis ante. Cras non fermentum sapien. Nunc sollicitudin nisi a posuere commodo. Fusce
tincidunt mi velit, in hendrerit dolor cursus et. Nam laoreet laoreet varius. Aliquam ut elit at elit ultricies iaculis vitae at purus. Pellentesque massa mi, ultricies elementum consequat sit amet, aliquam vitae sem. Nulla tempus nec augue non
lacinia. In hac habitasse platea dictumst. Sed quis rhoncus urna, lobortis bibendum sapien. Morbi accumsan commodo malesuada. Praesent porta tortor sed tristique dignissim. Maecenas et urna sit amet tortor semper commodo at vitae lectus. Nullam
imperdiet viverra sem, pellentesque sagittis ipsum pellentesque a. Mauris rutrum nunc id lectus commodo rhoncus.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est interdum
aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est interdum
aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
</div>
<div class="image">
<div>
<img src="https://nssdc.gsfc.nasa.gov/planetary/image/saturn.jpg" />
</div>
</div>
</div>
You can see how it works in Codepen.
Any help would be appreciated.

Answer 1

It has to be a bug on firefox. Your code seems to be working under 1170px. So I have come up with a quick fix, I don't know whether it's applicable in your case or not.
CSS:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper {
overflow: hidden;
position: relative;
max-width: 1170px;
margin-left: auto;
margin-right: auto;
}
.text {
width: 50%;
position: relative;
}
.image {
width: 50%;
position: absolute;
left: 50%;
top: 0;
bottom: 0;
}
.image div {
position: relative;
display: inline-block;
vertical-align: top;
height: 100%;
max-width: 100%;
overflow: hidden;
}
.image div:after {
content: url("https://vignette1.wikia.nocookie.net/uncyclopedia/images/6/67/Marvin_the_martian.jpg");
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 120px;
}
.image>div>img {
display: block;
height: 100%;
width: auto;
}
.big-wrapper {
margin-left: auto;
margin-right: auto;
}
<body class="big-wrapper">
<div class="wrapper">
<div class="text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel enim vulputate, luctus dolor vel, efficitur ante. Maecenas eget massa eu mi varius posuere vel mattis ante. Cras non fermentum sapien. Nunc sollicitudin nisi a posuere commodo. Fusce
tincidunt mi velit, in hendrerit dolor cursus et. Nam laoreet laoreet varius. Aliquam ut elit at elit ultricies iaculis vitae at purus. Pellentesque massa mi, ultricies elementum consequat sit amet, aliquam vitae sem. Nulla tempus nec augue non
lacinia. In hac habitasse platea dictumst. Sed quis rhoncus urna, lobortis bibendum sapien. Morbi accumsan commodo malesuada. Praesent porta tortor sed tristique dignissim. Maecenas et urna sit amet tortor semper commodo at vitae lectus. Nullam
imperdiet viverra sem, pellentesque sagittis ipsum pellentesque a. Mauris rutrum nunc id lectus commodo rhoncus.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est interdum
aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est interdum
aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
</div>
<div class="image">
<div>
<img src="https://nssdc.gsfc.nasa.gov/planetary/image/saturn.jpg" />
</div>
</div>
</div>
</body>

Answer 2

Update
This second version, Demo 2, has been stripped of all flex, fixed position, and even intrinsic measurements (vw). Firefox works and even IE surprisingly.
Changed the background-color to make it look spacier.
Major Changes
Added html,body {height:100%;width:100%}
.wrapper needed 100x100% as well.
Now .image and .text has a parent that their percentages can relate to.
Gave .image min-height:100%
Removed both <img> and used background-image
Optional Changes
Made .wrapper position:fixed
Made .text and .image position:absolute
.wrapper is a flex container
.wrapper has overflow-y:scroll so at smaller widths, text can still be read and it's scroll instead of auto so there be no jumpy behavior when the scrollbar pops in and out.
I also edited Marv as a PNG with a transparent background. P38 modulator not included.
Demo 1
html,
body {
height: 100%;
width: 100%;
}
* {
margin: 0;
padding: 0;
border: 0;
}
.wrapper {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: scroll;
display: flex;
justify-content: space-between;
height: 100%;
width: 100%;
}
.text {
position: absolute;
max-width: 49vw;
left: 0;
top: 0;
bottom: 0;
word-break: break-word;
margin: 0 10px 0 0;
padding: 10px;
flex: 0 1 auto;
}
.image {
min-width: 49vw;
min-height: 100%;
position: absolute;
background: url("https://nssdc.gsfc.nasa.gov/planetary/image/saturn.jpg");
background-size: cover;
right: 0;
bottom: 0;
top: 0;
flex: 1 0 auto;
}
.marv {
background: url("https://image.ibb.co/h1pCQy/marv.png");
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 120px;
}
<!doctype html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="wrapper">
<div class="text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel enim vulputate, luctus dolor vel, efficitur ante. Maecenas eget massa eu mi varius posuere vel mattis ante. Cras non fermentum sapien. Nunc sollicitudin nisi a posuere commodo. Fusce
tincidunt mi velit, in hendrerit dolor cursus et. Nam laoreet laoreet varius. Aliquam ut elit at elit ultricies iaculis vitae at purus. Pellentesque massa mi, ultricies elementum consequat sit amet, aliquam vitae sem. Nulla tempus nec augue non
lacinia. In hac habitasse platea dictumst. Sed quis rhoncus urna, lobortis bibendum sapien. Morbi accumsan commodo malesuada. Praesent porta tortor sed tristique dignissim. Maecenas et urna sit amet tortor semper commodo at vitae lectus. Nullam
imperdiet viverra sem, pellentesque sagittis ipsum pellentesque a. Mauris rutrum nunc id lectus commodo rhoncus.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est
interdum aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est
interdum aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
</div>
<div class="image">
<div class='marv'></div>
</div>
</div>
</body>
</html>
Demo 2
html,
body {
height: 100%;
width: 100%;
background-color:#000;
color:#fff
}
* {
margin: 0;
padding: 0;
border: 0;
}
.wrapper {
height: 100%;
width: 100%;
}
.text {
position: absolute;
max-width: 50%;
left: 0;
top: 0;
bottom: 0;
word-break: break-word;
margin: 0 10px 0 0;
padding: 10px;
}
.image {
min-width: 50%;
min-height: 100%;
position: absolute;
background: url("https://nssdc.gsfc.nasa.gov/planetary/image/saturn.jpg");
background-size: cover;
right: 0;
bottom: 0;
top: 0;
}
.marv {
background: url("https://image.ibb.co/hioYDJ/marv.png");
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 120px;
}
<!doctype html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="wrapper">
<div class="text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel enim vulputate, luctus dolor vel, efficitur ante. Maecenas eget massa eu mi varius posuere vel mattis ante. Cras non fermentum sapien. Nunc sollicitudin nisi a posuere commodo. Fusce
tincidunt mi velit, in hendrerit dolor cursus et. Nam laoreet laoreet varius. Aliquam ut elit at elit ultricies iaculis vitae at purus. Pellentesque massa mi, ultricies elementum consequat sit amet, aliquam vitae sem. Nulla tempus nec augue non
lacinia. In hac habitasse platea dictumst. Sed quis rhoncus urna, lobortis bibendum sapien. Morbi accumsan commodo malesuada. Praesent porta tortor sed tristique dignissim. Maecenas et urna sit amet tortor semper commodo at vitae lectus. Nullam
imperdiet viverra sem, pellentesque sagittis ipsum pellentesque a. Mauris rutrum nunc id lectus commodo rhoncus.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est
interdum aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est
interdum aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
</div>
<div class="image">
<div class='marv'></div>
</div>
</div>
</body>
</html>

Answer 3

You can add this code below your CSS to fix on Firefox. But it is only true if the image does not resize in width. So you can mix with #media to use.
#-moz-document url-prefix() {
.image div {
display: ruby-base;
}
.image div:after {
overflow: hidden;
}
}

Answer 4

I checked your code please replace image style rules as below:
.image > div > img {
display: block;
height: 100%;
width: 100%;
}
And after rules as below:
.image div:after {
content: url(https://vignette1.wikia.nocookie.net/uncyclopedia/images/6/67/Marvin_the_martian.jpg);
display: block;
position: absolute;
bottom: -100px;
right: -60px;
/* width: 100px; */
/* height: 120px; */
}
I tested in both chrome and firefox, it works.