css3: как создать 3 гибких столбца?

Question

Моя цель состоит в том, чтобы создать 3 колонки макета:

• первый столбец может принимать любую ширину: она будет меняться через JS
• второй столбец занимает столько же места, как это может
• третий столбец фиксированной ширины

#red { 
 
    background-color:red; 
 
    display:inline-block; 
 
    width:100px; /* this can change */ 
 
} 
 
#green { 
 
    background-color:green; 
 
    display:inline; 
 
\t width:100%; /* this should take ALL the place available */ 
 
\t 
 
} 
 
#blue { 
 
    background-color:blue; 
 
    display:inline-block; 
 
\t width:200px; /* this is fixed width */ 
 
}

<div id="container"> 
 
\t <div id="red">red</div> 
 
    <div id="green">green</div> 
 
    <div id="blue">blue</div> 
 
</div>

Возможно ли это без каких-либо JS?

Answer 1

Использование Flexbox это может быть сделано:

#container{ 
 
    display:flex; 
 
    flex-direction: row; 
 
    width:100% 
 
} 
 
#red { 
 
    background-color:red; 
 
    flex-grow:1; 
 
    flex-basis:100px; /* this can change */ 
 
    word-wrap: break-word 
 
} 
 
#green { 
 
    background-color:green; 
 
    flex-grow:1 /* this should take ALL the place available */ 
 
\t 
 
} 
 
#blue { 
 
    background-color:blue; 
 
    flex-grow:0; 
 
    flex-basis:200px; /* this is fixed width */ 
 
}

<div id="container"> 
 
\t <div id="red">redredredredredredredredredredredredredredredredredredredredredredred</div> 
 
    <div id="green">green</div> 
 
    <div id="blue">blue</div> 
 
</div>

Answer 2

Я хотел бы использовать таблицу отображения. IE8 + совместим.

#container { 
 
     display: table; 
 
     width: 100%; 
 
     height: 300px; 
 
    } 
 
    
 
    #red { 
 
     display: table-cell; 
 
     width: 100px; 
 
     background: red; 
 
    } 
 

 
    #blue { 
 
     display: table-cell; 
 
     background: blue; 
 
    } 
 

 
    #green { 
 
     display: table-cell; 
 
     width: 100px; 
 
     background: green; 
 
    }

<div id="container"> 
 
    <div id="red"></div> 
 
    <div id="blue"></div> 
 
    <div id="green"></div> 
 
</div>