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:

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;
}

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:

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;
}

• javascript
• jquery
• css
• resize
• autoresize

• can you please share your code ? CSS and HTML – Mihai T Commented Jul 5, 2016 at 14:22
• for child elements use width as % – brk Commented Jul 5, 2016 at 14:23
• Do you mind if the child elements stack when width of the window is too small to contain them in one line? – Cheng Sieu Ly Commented Jul 5, 2016 at 14:25
• add width in % for all 3 elements – Pratik Deshmukh Commented Jul 5, 2016 at 14:26
• @PratikDeshmukh I can't user percentages for all three children, since the first two must always have a fixed height: 400px and a fixed width: 288px – Angel Politis Commented Jul 5, 2016 at 14:29

3 Answers 3

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

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);
}

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);
});