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 does 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>

john wick is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

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

const modal = document.querySelector('#modal')
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-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>

If your goal, as I understand it based on your code and description, is to have the modal cover the entire screen then you just need to add the flex: 1 attribute to allow the flexbox to actually expand to the full size. For the scrollbars, if you don’t want them visible just set them to overflow: hidden; See here for how the flex attribute works: https://developer.mozilla.org/en-US/docs/Web/CSS/flex

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: 1;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

#modal>div>div {
  background-color: bisque;
}

#modal>div>div>img {
  display: block;
  width: 100%;
  height: 100%;
}
<div class="container">
  <div id="modal">
    <div>
      <div>
        <img id="modalImg" src="https://i.ytimg.com/vi/vGuQeQsoRgU/maxresdefault.jpg">
      </div>
    </div>
  </div>
</div>

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>

Not the answer you’re looking for? Browse other questions tagged html css or ask your own question.