flex container inside position absolute container not follow parent dimension-CodePudding

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 >
  <div id="modal">
    <div>
      <div>
        <img src="https://i.ytimg.com/vi/vGuQeQsoRgU/maxresdefault.jpg">
      </div>
    </div>
  </div>
</div>

CodePudding user response：

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 >
  <div id="modal">
       <img src="https://i.ytimg.com/vi/vGuQeQsoRgU/maxresdefault.jpg">
  </div>
</div>

CodePudding user response：

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

const modal = document.querySelector('#modal');
// remove this:
// modal.style.width = `${screen.width}px`; // you setting modal width bigger than your screenview
// modal.style.height = `${screen.height}px`;

.container { width: 100% }

#modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important; /* override your inline styles */
    height: 100% !important; /* override your inline styles */
    z-index: 1001 !important;
    display: flex;
    justify-content: center;
    background-color: rgba(60, 60, 60, 0.5);
    overflow: hidden;
}

#modal > div {
    display: flex;
    flex-grow: 1;
    background-color: bisque;
}

#modal img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* this will scale image to parent with same aspect ratio */
  object-position: top; /* set scale anchor to top center (center by default) */
}

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