CODEWITHSUNDEEP
javascriptjquerycssresizeautoresize
Angel Politis
Angel Politis

Reputation: 11313

Resize child div element to fit in parent div on window resize

I have a div element (shown with red border in the image below), which I want to be able to fit in its parent div when the window is resized and not fall into the next line (the parent is the one with the green border).

I want the red div to have a starting width: 949px (in my current screen) in order to fit the entire space available as shown in the image, but be resizable, so that it doesn't fall into the next line if width: 949px is to much to fit.

In essence, I want it at all costs to cover the area it covers in the image even if in a narrower screen that means it will be like 10px wide.

How can I achieve this? Any solution using CSS, JavaScript or jQuery will be gladly accepted.

The image:

enter image description here

CSS:

#parent {
    text-align: center;
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
}

#child1-row2 {
    text-align: left;
    vertical-align: middle;
    width: 288px;
    display: inline-block;
}

#child2-row2 {
    text-align: left;
    vertical-align: middle;
    width: 288px;
    position: relative;
    margin: 0 25px 0 25px;
    display: inline-block;
}

#child3-row2 {/* The one with the red border */
    vertical-align: middle;
    height: 452px;
    width: 949px;
    overflow: hidden;
    position: relative;
    display: inline-block;
}

Upvotes: 0

Views: 16112

Answers (3)

Thomas Lebricon
Thomas Lebricon

Reputation: 84

You can use flexbox to do this by using the flex-grow property.

HTML : 

<div id="main">
  <div id="box1">1</div>
  <div id="box2">2</div>
  <div id="box3">3</div>
</div>

CSS : 

#main {
   display: flex;
   flex-flow: row;
   width:100%;
   min-height:50px;
}
#box1{
    background-color:red; 
    width:100px; 
}
#box2{
    background-color:blue; 
    width:100px;
}
#box3{
    background-color:green;
    flex-grow: 1;
}

Here is a working JSFiddle

Upvotes: 3

Mohit Bhardwaj
Mohit Bhardwaj

Reputation: 10083

You can use css calc function for this. Support for calc seems to be quite good now.

As you have mentioned, the left side divs are of fixed width, say 120px each. Also suppose the margin between them is 30px. So, the total width left for your red div is 100% - (2*120 + 2*30)px i.e. (100% - 300px ).

#red-div
{
  width: calc(100% - 300px);
}

Upvotes: 1

Pratik Deshmukh
Pratik Deshmukh

Reputation: 308

Add % width or you can do following :

$(window).resize(function() {
    var window_width = $(window).width();
    var w1_width = $('.div1').width(); // The first element width
    var w2_width = $('.div2').width(); // The second element width
    var main_div_width = window_width - (w1_width+w2_width+gutter[i.e margin between all 3 elements]);
    $('.main_div_width').css('width', main_div_width);
});

Upvotes: 0

Related Questions