flex-basis not displaying properly on iPad Safari

I have these two css:

.main-page-left{  display: flex;  flex-wrap: wrap;  flex-direction: column;  flex-basis: 69%;}

.main-page-right {  flex-basis: 31%;  display: flex;  flex-wrap: wrap;  flex-direction: column;  justify-content: flex-start;}

It works as expected on PC, but specifically on iPads using Safari, the flex-basis is ignored for some reason and content in main-page-right stretches to 100% width, either overflowing the main-page-right div, or stretching the div to be over 31% of the screen size.

For added context, main-page-right is filled with content boxes:

.main-page-right .content {  overflow: hidden;  margin: 0 10px 10px 10px;  padding: 5px;}

Again, it works completely fine on PC browsers, but not specifically on iPads.

Added webkit stuff to the css, expecting that to fix the problem. Didn't work though.

.main-page-left {    display: -webkit-box;    display: flex;    flex-wrap: wrap;    flex-direction: column;    flex-basis: 69%;}.main-page-right {    flex-basis: 31%;    display: -webkit-box;    display: flex;    flex-wrap: wrap;    flex-direction: column;    -webkit-box-pack: justify;    -webkit-justify-content: flex-start;    justify-content: flex-start;}