0

I have a div (absolute-container) that displays dynamic content (e.g. sometimes there will be 2 button elements or 10 button elements).

I would like absolute-container to have a max-height of 100vh. If I try to set max-height 100vh, it does nothing. If I set height to 100vh, it will always display 100 of vh - which is not what I want because if only 2 buttons are returned I want the div height to change.

How can I achieve this div to have a dynamic height with max vh 100?

    .absolute-container {
        display: block;
        position: absolute;
        z-index: 121;
        background-color: #FFF;
        width: 90vw;
        border: 1px solid #BECAD6;
        margin-top: 12px;
    }


    .buttons-container {
       overflow-y: scroll;
       padding: 4px 8px;
    }
    <div id='absolute-container'>
       <div id='buttons-container'>
           <button />
           <button />
           <button />
           <button />
       </div>
    </div>
Michael
  • 403
  • 1
  • 9
  • 28
  • Maybe it's me but I don't see the issue – j08691 Aug 31 '21 at 18:08
  • Both body and html have 100% height ... and adding height: 100vh makes this element go way past browser view. – Michael Aug 31 '21 at 18:08
  • You're trying to select elements by their ID but you're using the class selector (.). – BSdoukos Aug 31 '21 at 18:10
  • If you need to make the element full height it is usually better to use position fixed (if you dont want users to scroll bellow this element) as it saves you some pain when using on mobiles. If you insists on position absolute, you should use top: 0 and make sure parent element with position relative is on top of the page. You can also use height: 100vh. – Jiří Vítek Aug 31 '21 at 18:12
  • Please read _[How do I ask a Good Question?](https://stackoverflow.com/help/how-to-ask)_ and _[How to Create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example)_. – Rojo Aug 31 '21 at 18:12
  • I always use this sequence {position: relative;left: 50%;top: 50%;transform: translate(-50%, -50%);height: 100vh;} – Luis Lobo Aug 31 '21 at 18:15
  • I made a mistake. I meant to say I'd like the box to be dynamic and max height 100 vh.... not always 100vh – Michael Aug 31 '21 at 18:20

0 Answers0