2

Example:

.left {
  width: calc(50% - 10px);
  float: left;
}

.right {
  background-color: green;
  width: calc(50% - 10px);
  float: right;
  height: 100px;
}
    <div class="container">
      <div class="title">Title</div>
      <div class="inner-container">
        <img
          class="left"
          src="http://mirrors.mi.ras.ru/CTAN/macros/latex/contrib/incgraph/exaimage-0001.png"
        />
        <div class="right"></div>
      </div>
    </div>

Is there a way to make div.right to fill 100% of div.inner-container's height?

Here's codesandbox if you don't like SO.

Yury Pastushenko
  • 53
  • 6

1 Answers1

1

Remove the floats and give display:flex to parent

.inner-container {
  display: flex;
}

.left {
  width: calc(50% - 10px);
}

.right {
  background-color: green;
  width: calc(50% - 10px);
}
<div class="container">
  <div class="title">Title</div>
  <div class="inner-container">
    <img class="left" src="http://mirrors.mi.ras.ru/CTAN/macros/latex/contrib/incgraph/exaimage-0001.png" />
    <div class="right"></div>
  </div>
</div>
doğukan
  • 23,073
  • 13
  • 57
  • 69
  • That works perfectly in chrome, but if you open this code in safari, you'll see that image aspect ratio changed and image becomes stretched vertically. The same effect takes place in blink-powered browsers. – Yury Pastushenko Jul 01 '20 at 19:29
  • add `object-fit: contain` to img – doğukan Jul 01 '20 at 19:33
  • In chrome everything is ok, but Safari now freezes `inner-container`'s height and right div's height is now always same as `inner-container`'s one. The `img` scales, as it was earlier. https://codesandbox.io/s/html-css-lx5ul?file=/styles.css – Yury Pastushenko Jul 01 '20 at 20:02
  • okay I will take a look later – doğukan Jul 01 '20 at 20:09