css3 flex: How to create 2 columns with : 100% + fixed width? - css

Question

I am trying to make a simple flex layout:
#header {
background-color: grey;
}
#container {
display:flex;
height: calc(100vh - 50px);
}
#chatAndUserContainer {
display: flex;
width: 100%;
}
#chatContainer {
background-color: red;
width:100%;
}
#usersContainer {
background-color: green;
width:320px;
}
<div id="header">header</div>
<div id="container">
<div id="chatAndUserContainer">
<div id="chatContainer">
chatContainer
</div>
<div id="usersContainer">
usersContainer
</div>
</div>
</div>
The problem is : when rendered, the width of #usersContainer is not 320px but... 274px !
Any idea on how to correct that ? (I need to use display:flex, not absolute)

Answer 1

You are facing the shrink effect. Since the total width (100% + 320px) is bigger than 100% both your elements will shrink equally to fit their parent container.
To avoid this you can disable the shrink for the second div:
#header {
background-color: grey;
}
#container {
display:flex;
height: calc(100vh - 50px);
}
#chatAndUserContainer {
display: flex;
width: 100%;
}
#chatContainer {
background-color: red;
width:100%;
}
#usersContainer {
background-color: green;
width:320px;
flex-shrink:0;
}
<div id="header">header</div>
<div id="container">
<div id="chatAndUserContainer">
<div id="chatContainer">
chatContainer
</div>
<div id="usersContainer">
usersContainer
</div>
</div>
</div>
Or don't use width:100% and replace it with flex:1 so that your first div will fill the remaining space left by the second one:
#header {
background-color: grey;
}
#container {
display:flex;
height: calc(100vh - 50px);
}
#chatAndUserContainer {
display: flex;
width:100%;
}
#chatContainer {
background-color: red;
flex:1;
}
#usersContainer {
background-color: green;
width:320px;
}
<div id="header">header</div>
<div id="container">
<div id="chatAndUserContainer">
<div id="chatContainer">
chatContainer
</div>
<div id="usersContainer">
usersContainer
</div>
</div>
</div>

Answer 2

You can use calc() in #chatContainer, or min-width in #usersContainer, or use them both like in example below.
#header {
background-color: grey;
}
#container {
display:flex;
height: calc(100vh - 50px);
}
#chatAndUserContainer {
display: flex;
width: 100%;
}
#chatContainer {
background-color: red;
width:calc(100% - 320px);
}
#usersContainer {
background-color: green;
width:320px;
min-width: 320px;
}
<div id="header">header</div>
<div id="container">
<div id="chatAndUserContainer">
<div id="chatContainer">
chatContainer
</div>
<div id="usersContainer">
usersContainer
</div>
</div>
</div>