Row with 3 columns of fixed and flexible widths - html

Question

I need to create three columns in a row where the right item has a min-width: 300px and the middle item has a fixed width of 595px. The left item has to use the rest of the width! I've tried to use flexbox and table cell but the left container seems to exceed the screen width which causes bottom scrollbar to appear, which is not wanted in this case.
<div class="row">
<div class="column left">
</div>
<div class="column middle">
</div>
<div class="column right">
</div>
</div>
.row {
width: 100%;
& .column {
&.left {
}
&.middle {
width: 595px !important;
}
&.right {
min-width: 300px;
}
}
}

Answer 1

Based on your requirements, you're going to get a horizontal scrollbar when the screen width is less than 895px. That's the length of your width: 595px and min-width: 300px containers.
.row {
display: flex;
height: 100px;
}
.left {
flex: 1; /* consume remaining space */
background-color: aqua;
}
.middle {
flex: 0 0 595px; /* equivalent to width: 595px; flex-grow, flex-shrink, flex-basis */
background-color: orange;
}
.right {
min-width: 300px;
background-color: lightgreen;
}
<div class="row">
<div class="column left"><code>flex: 1</code></div>
<div class="column middle"><code>width: 595px</code></div>
<div class="column right"><code>min-width: 300px</code></div>
</div>
jsFiddle demo