How to set up an element with max-height so that the elements inside it will take the available space evenly (See description)

Question

I have a CSS issue which perhaps is too specific for this forum but I think maybe other people will benefit from it as well. I have an element which has a max-height set, inside it there are two additional elements like so:

Code example:


  ...
  ...

The the content of the two inner element has unknown height, which can be changed in runtime. I want the following behavior:

If the sum of the contents are less than max-height, they should each have their content's height, and the outer element should not be higher then their content:
If the sum of contents is more than max-height and both are more than half of it, each should get half the max-height:
If the sum of contents is more than max-height but one of the elements' content is less then 50%, the smaller one should have its content's height, and the bigger one should fill the remaining space:

I feel like that should be possible with pure CSS but I couldn't figure out a way to do it. Anyone has any idea?...

user_15273968 · Answer

If you do not specify height on container then it's initial value is auto. Auto means it's height is determined by it's children. So height will always be equal to it's content height.

max-height is not same as height, it is applied after height is calculated ref. Setting max-height doesn't mean you are setting height also. You are just clipping the element height.
Your case 2 and 3 demands children to be dependent on parent containers height. But the container's height is dependent on the children. That is why you'll need javascript to implement case 2 and 3.

In case if you decide to have fixed height to the container then you can use grid with auto-fit templet-rows to achieve all the test cases using pure CSS:

//the script is used only for increasing content heights for the demo
var c1, c2;
var r1, r2;

document.addEventListener('DOMContentLoaded', init);

function init() {
  c1 = document.getElementById('c1');
  c2 = document.getElementById('c2');

  r1 = document.getElementById('r1');
  r2 = document.getElementById('r2');

  r1.addEventListener('change', update1);
  r2.addEventListener('change', update2);

  update1();
  update2();
}

function update1() {
  c1.style.height = r1.value + 'px';
  c1.innerText = 'Content Height: ' + r1.value + 'px';
}

function update2() {
  c2.style.height = r2.value + 'px';
  c2.innerText = 'Content Height: ' + r2.value + 'px';
}

* {
  box-sizing: border-box;
}

.container {
  height: 200px;
  border: 2px solid;
  background-color: lemonchiffon;

  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(0, min-content));
}

.container>div {
  border: 1px dashed gray;
  overflow: auto;
  height: fit-content;
  max-height: 100%;
}

.inner-element:nth-child(1) {
  background: lightgreen;
}

.inner-element:nth-child(2) {
  background: lightblue;
}


  Element one height: 0
  400


  Element two height: 0
  400

user_17148835 · Answer

Here you go, a flexbox is perfect for this case:

You can give the children also a max-height. The problem with that is that they cant be bigger of that value, if there is still space in the parent div.

If you dont have max-height in the children they will fill all the available space if needed. But now you have the problem that if both if taller then half of the space, they won't share the space 50/50. They will share it proportional of their height.

If you really really want the condition of the 2. behavior you mentiont in your question you need to use javascript.

-> You can add both height from the children and if they the total is bigger than the max-height you can set both to a spesific height.

#parent {
  max-height: 180px;
  width: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

.child {
  background: yellow;
  border: 2px solid black;
  overflow-x: hidden;
  padding: 5px;
}



  

    
      test
te
sttes
ttes
ttes
tte
sttes
t
t
es
t
t
e
stt
e
s
t
    

    
      t
e
s
t

user_5500603 · Answer

You do not need to put max-height on any of the children. Just put a max-height on the parent, then the flexbox will do the rest !

.grid {
    --gutterH : 30px;
    --gutterV : 30px;

    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    width: calc(100% + var(--gutterV));
    margin: calc(var(--gutterH) / -2) calc(var(--gutterV) / -2);
}

.grid-item {
    --gridItemWidth : auto;
    
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    margin: calc(var(--gutterH) / 2) calc(var(--gutterV) / 2);
    width: calc(var(--gridItemWidth) - var(--gutterV));
}

.grid-item.grid-item--onethird {
    --gridItemWidth : calc(100% / 3);
}

.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 250px;
    border: solid 1px #000;
}

.inner-element {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    overflow: hidden;
}

.inner-element:not(:last-child) {
    border-bottom: solid 1px #000;
}


    
        
        
            
                1
            
            
                2
            
        
    
    
        
        
            
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut risus dapibus purus blandit tristique non vel purus. Nam bibendum elementum justo, rutrum tristique massa faucibus id. Integer ut metus justo. Etiam vitae congue risus. Nulla quis libero vel est fermentum efficitur. Cras mollis aliquet metus id rhoncus. Proin gravida, leo quis rhoncus lacinia, erat nulla consequat magna, at elementum dui tellus facilisis leo. Ut nec ex eleifend, scelerisque lorem nec, bibendum quam. Fusce quis sapien ut sapien lacinia congue.
            
            
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut risus dapibus purus blandit tristique non vel purus. Nam bibendum elementum justo, rutrum tristique massa faucibus id. Integer ut metus justo. Etiam vitae congue risus. Nulla quis libero vel est fermentum efficitur. Cras mollis aliquet metus id rhoncus. Proin gravida, leo quis rhoncus lacinia, erat nulla consequat magna, at elementum dui tellus facilisis leo. Ut nec ex eleifend, scelerisque lorem nec, bibendum quam. Fusce quis sapien ut sapien lacinia congue.
            
        
    
    
        
        
            
                1
            
            
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut risus dapibus purus blandit tristique non vel purus. Nam bibendum elementum justo, rutrum tristique massa faucibus id. Integer ut metus justo. Etiam vitae congue risus. Nulla quis libero vel est fermentum efficitur. Cras mollis aliquet metus id rhoncus. Proin gravida, leo quis rhoncus lacinia, erat nulla consequat magna, at elementum dui tellus facilisis leo. Ut nec ex eleifend, scelerisque lorem nec, bibendum quam. Fusce quis sapien ut sapien lacinia congue.

How to set up an element with max-height so that the elements inside it will take the available space evenly (See description)

3 Answers