Firefox中的内联块不会缩小到内容

Question

我有两列,都是屏幕宽度的50%.左列填充文本,右列填充图像,缩放到文本的高度.另一幅图像放在第一张图像上,位于右下角.即使屏幕宽度超出图像宽度(并且图像右侧出现空白),第二个图像也应保持与第一个图像的右下角保持对齐.

您可以在下面的代码中看到的设置适用于除Firefox以外的浏览器.在Firefox中,第二个图像尽可能位于最右侧,直到第一个图像的原始宽度.我想我已经将它缩小到我给出的100%高度.image div,如果我使用固定高度(即400px),则第二个图像正确对齐.我需要百分比高度,让第一个图像缩放到文本高度.

.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>

您可以在Codepen中看到它的工作原理.

任何帮助,将不胜感激.

Answer 1

更新

第二个版本（演示 2）已删除所有弯曲、fixed位置，甚至固有测量 ( vw)。Firefox 可以正常工作，甚至 IE 也可以正常工作。更改了背景颜色，使其看起来更宽敞。

主要变化

• 添加html,body {height:100%;width:100%}
• .wrapper还需要 100x100%。
• 现在，.image他们.text的百分比可以与父母联系起来。
• 给予.image min-height:100%
• 删除<img>并使用background-image

可选更改

• 制成.wrapper position:fixed

• 制造.text和.image position:absolute

• .wrapper是一个弹性容器

• .wrapper因此，overflow-y:scroll在较小的宽度下，仍然可以读取文本，scroll因此auto当滚动条弹出和弹出时，不会出现跳跃行为。

• 我还将 Marv 编辑为具有透明背景的 PNG。不包括 P38 调制器。

演示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>

演示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>