Two column layout with left fluid and right fill the rest width

Question

I need something similar to this and this. However I want the right column not to be fixed size, but variable size. Is it possible?

––––––––––––––––––––––––––––         


        

Answer 1

This is the float solution. You can set a fixed width to .one column, or leave as it is to let the content to decide. And set overflow: auto; or overflow: hidden; to .two column.

.one {
    float: left;
    background: aqua;
}
.two {
    overflow: auto;
    background: yellow;
}

hello
world

The flexbox solution. The key is to set flex: 1; aka flex-grow: 1; to the dynamic width column. Follow this to see the browser support tables.

body {
    display: flex;
}
.one {
    background: aqua;
}
.two {
    flex: 1;
    background: yellow;
}

hello
world