Multiple nested elements inside div with fixed height

Question

<div id=“maincontainer”>
    <div>Some data</div>
    <div id = "imagecontainer"> My image is here</div>
    <div id = “button-row”>
        <button id=“imagebutton” class="selected" type="button">Image</button> 
        <button id=“videobutton” type="button">Video</button> 
    </div>
</div>

My parent div #maincontainer has fixed height - 200 px and width. It is probably not a good practice to make height fixed, however, this is required for me to resolve another issue.

How can I make all child elements to fit into this container?

Before setting the size to 200 px, all child elements fitted well into #maincontainer. However, after setting fixed height, I can see that my #imagecontainer and #button-row overflowing my parent container.

Do I need to set height to all child elements?

What if I have multiple nested child containers inside of my main container?

Answer 1

You could make it a flex container;

.maincontainer{
  display: flex;
  flex-flow: column nowrap;
}

Then adjust the flex-shrink on the three divs inside based on which you want to shrink to fit.

For example maybe you want all the images to be the same size. If so you could do:

.img-container{
  flex: 0 0 75px;
}
.img-container img{
  height: 100%;
}

But the first div to shrink to fit:

.some-data-div{
  flex: 1 1 auto;
}

The nested divs inside you could make flex containers, too, depending on what they are and what they contain. You could also make the whole thing a CSS grid. If you are creating a defined space (as opposed to letting it flow to the space it needs) you will probably need to define how exactly that limited space will be used. So yes, you may have to define the height, or max-height, of several elements.