Why are the children of a flexbox scaling down even though I've set a width for them?

Question

As you can see in the snippet below, I have 3 children to the flexbox with a set width of 200px, 150px and 300px. However, when I resize the browser and the elements run out of space, they start scaling down even though they have hard coded width and I'm not sure why is this happening.

.row {
display: flex;
justify-content: space-between;
width: 100%;
height: 50px;
}
.column1 {
width: 200px;
background-color: red;
}
.column2 {
width: 150px;
background-color: blue;
}
.column3 {
width: 300px;
background-color: green;
}

<div class="row">
    <div class="column1"></div>
    <div class="column2"></div>
    <div class="column3"></div>
</div>

Answer 1

Your items are shrinking because flexbox tries to fit all children into its width. You can change this behaviour by specifying flex-shrink: 0 on your column divs which tells flexbox that your items should not shrink beyond their defined width. You can also read more about flex-shrink at https://css-tricks.com/almanac/properties/f/flex-shrink/.

.row {
display: flex;
justify-content: space-between;
width: 100%;
height: 50px;
}
.row > div {
    flex-shrink: 0;
}
.column1 {
width: 200px;
background-color: red;
}
.column2 {
width: 150px;
background-color: blue;
}
.column3 {
width: 300px;
background-color: green;
}

<div class="row">
    <div class="column1"></div>
    <div class="column2"></div>
    <div class="column3"></div>
</div>