CSS : Max width 100% of parent without height but max-height

Question

I'm looking for something a bit strange in pure CSS (if it's possible) ...

I have a modal without height but with a max-height and I have a content which should be of a certain height but it should be 100% of the height of the parent max!

I don't know if you really get me so here's a sample of what i'm trying to do :

#modal {
    height: auto;
    width: auto;
    max-height: calc(100vh - 50px);
    max-width: calc(100vw - 50px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid red;
    padding: 5px;
}

#modal-content {
    width: 700px;
    height: 700px;
    max-height: 100%; /* this should be 100% of the parent but don't work */
    border: 1px solid blue;
    padding: 5px;
}

<div id="modal">
    <div id="modal-content"></div>
</div>
 

If you know any way of making it I'll appreciate it !

Thanks for your help !

Answer 1

Use flexbox and you can rely on the shrink effect

#modal {
  max-height: calc(100vh - 50px);
  max-width: calc(100vw - 50px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid red;
  padding: 5px;
  /* added */
  display: flex;
  flex-direction: column;
  /**/
}

#modal-content {
  width: 700px;
  height: 700px;
  max-width: 100%; /* you only need max-width */
  border: 1px solid blue;
  padding: 5px;
}

* {
  box-sizing: border-box;
}

<div id="modal">
  <div id="modal-content"></div>
</div>