Within the content div, I have three separate divs that resize when the browser window is adjusted.
- The blue and red divs should maintain a fixed width
- The green div should resize to fill any available space on the left
I attempted to accomplish this using CSS with the following code:
.yellow{
height: 100%;
width: 100%;
}
.red{
height: 100%;
width:200px;
display:inline-block;
background-color: red;
}
.green{
height: 100%;
min-width:400px;
display:inline-block;
background-color:green;
}
.blue{
height: 100%;
width:400px;
display:inline-block;
background-color: blue;
}
Unfortunately, this code did not properly resize the green div, and in some browsers, the red panel was not visible.
I also experimented with float: left as well as:
display: -webkit-flex;
display: flex;
However, these attempts were unsuccessful. Any suggestions on how to achieve this effect?