Flexbox is not fitting on mobile - html

Question

This is my first week working with flexbox, and I like it a lot until now. I am doing everything I can to get away of floating elements. Therefore my main purpose is not a solution there is floating elements in. I run into 2 problems, that I am not quite sure of the correct saolution.
Problem 1:
When I hit around 1200px I can see the 2 columns is starting moving together. How can that be?
Problem 2:
Why is my columns not fitting on viewport under 768px? I can see on the mobile the 900x200 is going over the edge of the max width on telephone.
Example page of my code here.
.column-layout {
max-width: 1200px;
background-color: #fff;
margin: 40px auto 0 auto;
}
.column-layout-one {
max-width: 1200px;
background-color: #fff;
margin: 40px auto 0 auto;
}
.header-item-one {
order: 1;
}
.header-item-two {
order: 2;
}
#media (min-width: 768px) {
.column-layout-one {
display: flex;
justify-content: space-between;
}
}
<div class="column-layout-one">
<div class="header-item-one">
<img src="http://placehold.it/280x200">
</div>
<div class="header-item-two">
<img src="http://placehold.it/900x200">
</div>
</div>

Answer 1

.column-layout {
max-width: 1200px;
background-color: #fff;
margin: 40px auto 0 auto;
}
img {max-width: 100%;}
.column-layout-one {
max-width: 1200px;
background-color: #fff;
margin: 40px auto 0 auto;
}
.header-item-one {
order: 1;
}
.header-item-two {
order: 2;
}
#media (min-width: 768px) {
.column-layout-one {
display: flex;
justify-content: space-between;
}
}
<div class="column-layout-one">
<div class="header-item-one">
<img src="http://placehold.it/280x200">
</div>
<div class="header-item-two">
<img src="http://placehold.it/900x200">
</div>
</div>
When I hit around 1200px I can see the 2 columns is starting moving together. How can that be?
Your .column-layout-one has max width 1200 set, inner elements has 280+900 = 1180 px, and you have used space-between on its parent. so, when the parent has space more than its defined width, inner items will be seprated by diffrence of 1200-1180 = 20px; as soon as its parent will shrink this space will reduce, because its the space left by these 2 divs,
Space-between = outerWidth - (Total of inner width)
if you want your images to fit in screen on mobile, then provide it
max-width: 100%, if you will not do so, itwill take its orignal width and distort your design.

Answer 2

Set your .header-item-one and -two to flex: 1; to fill up the whole space in your flex box. Then, set max-width values for the expected results.
.header-item-one {
flex: 1;
max-width: 200px;
background-color: red;
height: 300px;
}
.header-item-two {
flex: 1;
max-width: 900px;
background-color: blue;
height: 300px;
}
About the other problem -- the divs go over the viewport boundaries, because you have placeholder images. Images are fixed-width inline block elements, meaning they won't fit the user's viewport, unless you crop them out with overflow-x: hidden; in the parent div or do something like div img { max-width: 100%; }.
Remove the images and try out that css. Fiddle: https://jsfiddle.net/59meh6vs/