位置绝对容器内的弹性容器不遵循父维度

Question

I try to create modal box that 2 type design, my problem flex that inside absolute parent not follow parent dimension. if u see image inside flex container, it not fill all space. but the scroll appear.

 const modal = document.querySelector('#modal') modal.style.width = `${screen.width}px`; modal.style.height = `${screen.height}px`;

 .container { width: 100% } #modal { position: absolute; top: 0; left: 0; z-index: 1001 !important; display: flex; justify-content: center; background-color: rgba(60, 60, 60, 0.5); overflow: hidden; } #modal > div { display: flex; flex-direction: column; justify-content: center; overflow: scroll; } #modal > div > div { background-color: bisque; } #modal > div > div > img { display: block; width: 100%; }

 <div class="container"> <div id="modal"> <div> <div> <img src="https://i.ytimg.com/vi/vGuQeQsoRgU/maxresdefault.jpg"> </div> </div> </div> </div>

Answer 1

You setting modal width bigger than your screenview by scripts, it can be done by CSS, see:

 body { margin: 0; } * { box-sizing: border-box; } .container { position: relative; /* to make child element use parent dimentions, it have to be "relative" */ width: 100%; max-width: 1200px; /* set max container width */ margin: 0 auto; /* center align of container */ padding: 0 1rem; } /* use media queries to set you container max width size for larger screens */ @media (min-width: 1680px) { .container { max-width: 1400px; } } .modal { position: absolute; display: flex; justify-content: center; top: 0; left: 0; width: 100%; min-height: 70vh; /* minimal modal height will take 70% of screen height */ padding: 1rem; overflow: hidden; z-index: 1001; background-color: rgba(60, 60, 60, 0.5); } .modal-inner { display: flex; flex-direction: column; overflow: auto; } .image { width: 1000px; height: auto; }

 <div class="container"> <p>Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque ut nisi. Morbi ac felis.</p> </div> <div class="container"> <div class="modal"> <div class="modal-inner"> <h2>Ut a nisl id ante</h2> <p>Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Pellentesque auctor neque nec urna. Praesent turpis. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.</p> <img class="image" src="https://i.ytimg.com/vi/vGuQeQsoRgU/maxresdefault.jpg"> </div> </div> </div>

Answer 2

You can use object-fit: cover; to fit image in the screen.

 const modal = document.querySelector('#modal') modal.style.width = `${screen.width}px`; modal.style.height = `${screen.height}px`;

 .container { width: max-content; height:max-content; overflow:hidden; } #modal { position: absolute; top: 0; left: 0; z-index: 1001 !important; display: flex; justify-content: center; background-color: rgba(60, 60, 60, 0.5); overflow: hidden; } img { object-fit: cover; }

 <div class="container"> <div id="modal"> <img src="https://i.ytimg.com/vi/vGuQeQsoRgU/maxresdefault.jpg"> </div> </div>