Multiple width flexicolumns - flexbox

Question

I have been struggling with the flexbox column layout. I am trying to create a 3 column layout that stretch vertically all the way to the end of the page (height:100%;). However, 2 of the columns must have specific widths that still scale down on different size screens, is this possible?
CSS:
.container {
display: -webkit-flex;
display: flex;
height: 100%;
}
.initial {
-webkit-flex: initial;
flex: 1;
width: 510px;
min-width: 100px;
}
.flex1 {
-webkit-flex-basis: 28px; /* Safari 6.1+ */
flex-basis: 28px;
}
.flex2 {
-webkit-flex: 2;
flex: 2;
}
HTML
<div class="container">
<section class="elem initial">
<div id="Left">
<h1>Heading</h1>
<p>Lorem Ipsum...</p>
</div>
</section>
<section class="elem flex1">
<div class="col"><img src="img/stripe"/></div>
</section>
<section class="elem flex2">
<div id="Right">
<h2>Header</h2>
<ul>
<li>List item.</li>
</ul>
</div>
</section>
</div>

Answer 1

Here's a working example of what you might be looking for, if I've understood the question correct.
I've commented the important stuff in the code. Take a look at the code, and compare it with your own. You've been using some unnecessary flexbox elements such as flex-basis: 28px; which should just be width: 28px;
HTML
<div class="container">
<section class="elem initial">
<div id="Left">
<h1>Heading</h1>
<p>Lorem Ipsum...</p>
</div>
</section>
<section class="elem flex1">
<div class="col"><img src="img/stripe"/></div>
</section>
<section class="elem flex2">
<div id="Right">
<h2>Header</h2>
<ul>
<li>List item.</li>
</ul>
</div>
</section>
</div>
CSS
html, body {
height: 100%; /* Makes it possible to illustrate the full 100% height */
}
.container {
display: flex; /* Adds flex functionality */
height: 100%;
}
.initial {
width: 510px;
min-width: 100px;
background-color: orange;
}
.flex1 {
width: 28px;
background-color: red;
}
.flex2 {
flex: 1; /* Fills the rest of the available space */
background-color: green;
}
UPDATE
I forked the pen in order to create a new working example based on the comments from the author of this question. He wanted the columns to wrap and the gutter to disappear at a certain size - I've used media queries to accomplish this.
Link to the new forked CodePen
HTML is the same.
CSS
html, body {
height: 100%; /* Makes it possible to illustrate the full 100% height */
}
.container {
display: flex; /* Adds flex functionality */
flex-direction: column;
height: 100%;
}
#media all and (min-width: 768px) {
.container {
flex-direction: row;
}
}
.initial {
width: 510px;
min-width: 100px;
background-color: orange;
}
.flex1 {
display: none;
}
#media all and (min-width: 768px) {
.flex1 {
display: flex;
width: 28px;
background-color: red;
}
}
.flex2 {
flex: 1; /* Fills the rest of the available space */
background-color: green;
}
Remember your vendor-prefixes.