Squeeze a div between two other divs when window resizes - html

Question

I have the following code:
HTML:
<div class="main">
<div class="myClass1">
</div>
<div class="myClass2">
</div>
<div class="myClass3">
</div>
<div class="myClass4">
</div>
</div>
CSS:
.main {
width:100%;
height:100px;
background-color:#000;
}
.myClass1 {
height: 100px;
width:200px;
background-color: blue;
display: inline-block;
}
.myClass2 {
height: 100px;
width:200px;
background-color: yellow;
display: inline-block;
}
.myClass3 {
height: 100px;
width:200px;
background-color: red;
display: inline-block;
}
.myClass4 {
height: 100px;
width:200px;
background-color: yellow;
display: inline-block;
}
JSFiddle: http://jsfiddle.net/a2whdvmw/
I want them all aligned to the right of main, but as I resize the window, at some point myClass1 will reach the left edge of main and I want myClass3 to squeeze between myClass2 and myClass4 from that point on.
myClass1, myClass2 and myClass4 all have fixed size. So when I resize the window, the only width I want to change is the one of myClass3.
Is it possible to do this with CSS only?

Answer 1

Use flex layout.
Specify flex: 0 1 200px for your .myClass3. This will cause it not to grow but still allow shrinking from a flex-basis width of 200px. For the rest, specify a flex: 0 0 200px to disallow both expanding and shrinking, effectively fixing those at 200px, as the .myClass3 shrinks with the decrease in available space.
Demo Fiddle: http://jsfiddle.net/abhitalks/a2whdvmw/1/
Demo Snippet:
.main { width:100%; height:100px; background-color:#000; display: flex;}
.myClass1 {
flex: 0 0 200px;
height: 100px; background-color: blue;
}
.myClass2 {
flex: 0 0 200px;
height: 100px; background-color: yellow;
}
.myClass3 {
flex: 0 1 200px;
height: 100px; background-color: red;
}
.myClass4 {
flex: 0 0 200px;
height: 100px; background-color: yellow;
}
<div class="main">
<div class="myClass1"></div>
<div class="myClass2"></div>
<div class="myClass3"></div>
<div class="myClass4"></div>
</div>

Answer 2

Try media query..
#media only screen and (max-width: 1200px){
.myClass3{
width:10%;
}
}
Hope this helps..
Max width and width(%) can be change..