How to prevent child div from resize?

Question

The height of my parent div is fixed and i need to add multiple child div which could be scrolled through due to overflow. I have used flex layout to arrange child div in one column.

The issue i am facing is that, the child div(s) are resizing themselves to adjust inside the parent div instead of maintaing their height and introducing scroll bar.

I have tried resize: none;, but that didn't worked.

Code is as follows :

Html code :

<div id="parent-box">
        <div class="child-box"></div>
        <div class="child-box"></div>
        <div class="child-box"></div>
        <div class="child-box"></div>
        <div class="child-box"></div>
</div>

Css code :

#parent-box{
    height: 300px;
    width: 500px;

    display: flex;
    flex-direction: column;
    overflow: auto;
}
.child-box {
    height: 100px; 
    margin: 10px;
    resize: none;
}

I have tried finding the solution but didn't got one, since i didn't knew exactly what to search. Please share any article or documentation related to this concept. Thank you.

score 2 · Answer 1 · answered Apr 04 '22 at 08:10

You should use the flex or flex-basis property rather than width. Like this:

.child-box {  
  flex: 0 0 100px;
}

equivalent to:

flex-grow: 0;      /* do not grow   - initial value: 0 */
flex-shrink: 0;    /* do not shrink - initial value: 1 */
flex-basis: 100px; /* width/height  - initial value: auto */

You can read more about it here: How to set a fixed width column with CSS flexbox

score 1 · Accepted Answer · answered Apr 04 '22 at 08:07

Try adding flex: 0 0 25% this property in child element

#parent-box{
    height: 300px;
    width: 500px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    background: red;
}
.child-box {
    height: 100px; 
    margin: 10px;
    resize: none;
    background: yellow;  
    flex: 0 0 100px;
}

   <div id="parent-box">
        <div class="child-box"></div>
        <div class="child-box"></div>
        <div class="child-box"></div>
        <div class="child-box"></div>
        <div class="child-box"></div>
</div>

How to prevent child div from resize?

2 Answers2