CSS set height and width but have div resize in a flexbox

Question

I am trying to make a modal dialog that auto resizes and overflows the content inside. However, the modal content keeps overflowing the container and wont show scrollbars. It's because the container height is explicitly set, but I want the inner content to stretch it to it's max-size. I don't know of any tricks to get it to work.

What I originally came up with:





    
    
    
    Document
    
    



    
        
            
                Header
                
                    X
                
            
            Initial Content
            Footer

An example of what it should look like in all four cases (no content, full content, large and small)

window.onload = function() {
  var contentString = 'ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent';
  window.el = document.getElementsByClassName('filled');

  function toggleContent() {
    Array.prototype.forEach.call(el, f => {
      if (f.innerText == "Content") f.innerText = contentString;
      else f.innerText = "Content";
    })
  }
  window.toggleContent = toggleContent;
  toggleContent();
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  align-content: flex-start;
}

#fixed {
  position: fixed;
  right: 0px;
  top: 0px;
}

.panel {
  display: inline-block;
  overflow: hidden;
  border: 2px solid black;
}

.panel.one,
.panel.two {
  width: 50%;
  height: 400px;
}

.panel.three,
.panel.four {
  width: 14%;
  height: 400px;
}

article {
  /* overlay */
  background-color: gray;
}

section {
  /* modal window */
  border: 3px solid red;
  background-color: white;
}

p {
  /* content */
  border: 3px solid green;
  word-break: break-all;
}

article {
  /* overlay, all behave the same pretty much */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.one section {
  /* modal window */
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 50%;
  max-width: 80%;
  max-height: 80%;
}

.one p {
  /* content */
  border: 3px solid green;
}

.three section {
  display: flex;
  flex-direction: column;
  width: 90%;
  height: 40%;
}

.two section {
  display: flex;
  flex-direction: column;
  max-height: 95%;
  max-width: 95%;
}

.two p {
  max-height: 95%;
  overflow-y: auto;
}

.four section {
  display: flex;
  flex-direction: column;
  max-height: 95%;
  max-width: 88%;
}

.four p {
  overflow-y: auto;
}

Summary

Is there a way to do what I want with pure HTML/CSS ? I cannot find a way to overcome the fact that max-height: 100% only respects explicit definitions of height

Rob Kwasowski · Accepted Answer

I think all you need to do is go to your second example, broken & overflow-y-scroll and change the height property to min-height. Is that the effect that you want?

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #fixed {
            position: fixed;
            top: 0px;
            right: 0px;
            transform: scale(2.0) translate(-0.5)
        }

        .overlay {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
            align-content: center;
            background-color: gray;
        }

        section {
            background-color: white;
            border: 3px solid red;
            display: flex;
            flex-direction: column;
            min-width: 36em;
            min-height: 24em;
            max-width: 95vw;
            max-height: 95vh;
        }

        p {
            border: 3px solid green;
            word-break: break-all;
            overflow-y: auto;
        }

        header {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            align-content: center;
        }





    
    
    
    Document
    



    
        
            
                Header
                
                    X
                
            
            Initial Content
            Footer

CSS set height and width but have div resize in a flexbox

What I originally came up with:

An example of what it should look like in all four cases (no content, full content, large and small)

Summary

Answers (1)

Related Questions