<!DOCTYPE html> <head> <meta charset="utf-8"> <title>Reference case for %-height potentially-overflowing images</title> <style> .container { height: 80px; border: 2px solid purple; margin: 1px; display: inline-block; } .percent-size { display: block; height: 100%; border: 2px solid black; box-sizing: border-box; } .scrollX { overflow-x: scroll; } .scrollBoth { overflow: scroll; } </style> </head> <body> <div class="container scrollX" style="width: 50px; height: 120px"> <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII="> </div> <div class="container scrollX" style="width: 60px; height: 120px"> <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII="> </div> <br> <div class="container scrollBoth" style="width: 78px"> <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII="> </div> <div class="container scrollBoth" style="width: 79px"> <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII="> </div> <br> <div class="container" style="width: 80px"> <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII="> </div> <div class="container" style="width: 90px"> <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII="> </div> </body>