Question 236202 in CSS Question posted in
Some basic documentation can be found here.

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

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 !

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    you can use the min() feature for the modal-content height.

    If you set the height to min(700px, 100%), it will be at most 700px, but will be smaller than 100% of the parent’s height.

    Keep in mind, that you have a 5px padding and a 1px border. (12px in total bottom/top).

    This is the correct code to achive your goal:

    #modal-content {
  width: 700px;
  height: min(700px, calc(100% - 12px));
  border: 1px solid blue;
  padding: 5px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search