When reducing the width of the browser in an absolute div'a .block, the height does not change as intended: the height becomes larger than the size of the picture, although I specified everything in percent for both blocks. Tell me, what am I doing wrong? How to make the height of .block when changing the width of the browser was equal to the height of the picture. Without using javascript.
Link to codepen ↓↓↓
https://codepen.io/mihail-kamahin/pen/axKdKV
body, p { margin: 0; } *, *::after, *::before { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .container { width: 100%; max-width: 1200px; margin: 0 auto; } .section { padding: 80px 0; background: #ceeeeb; } .wrapper { position: relative; } .image { max-width: 100%; height: auto; } .block { border: 1px solid red; position: absolute; top: 0; left: 0; max-width: 300px; width: 30%; max-height: 559px; height: 100%; } <div class="section"> <div class="container"> <div class="wrapper"> <img src="https://pp.userapi.com/c847021/v847021964/1f4d5a/aWI-FhPfH7I.jpg" alt="" class="image"> <div class="block"></div> </div> </div> </div> 
