What happens when the image is broken, depends on the browser. Chrome and Safari use the dimensions specified in the img tag. A width of 790px then must overflow a container with a width of 600px. To avoid that i would either not specify them in that manner or overwrite it in css later. To control the layout and make it independent from the image while loading i recommend:

1. Defining the layout rather by controlling the dimensions of the containers than the content.

2. Giving relative values (flex, percentages), not fixed (px).

These definitions seem to have the desired outcome:

.container{
  display:flex;
  width:600px;
  align-items:center;
}
.column{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  flex: 1 1 40%; /* moved to container level */

}
img{
        height:auto;
        min-width:0;
        min-height:0;
        max-width: 100%;
        width: auto; /* added */
}
p{
          flex: 1 0 60%;
}