Width ratio for divs/columns in a flex box - html

Question

I have a responsive template made with a flex box containing a picture div/column and a text div/column. When the width is 50% for both columns, its working fine. But now i want the picture width to be 60% and the text width to be 40%. My problem is when i remove the flex:0 0 auto; width: 50%; in the .container .columns css section and try to give the .columns.image a width of 60% and the .columns.content a width of 40% it creates problems with the media query.
#import url("https://fonts.googleapis.com/css2?family=Assistant&display=swap");
#import url("https://use.typekit.net/yoj6eqg.css");
* {
padding: 0;
margin: 0;
}
body {
overflow-x: hidden;
}
.container {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin: 5% 15% 5% 15%;
}
.container .columns {
flex: 0 0 auto;
width: 50%;
}
.container .columns.image {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.container .columns.content .content-container {
padding: 40px 50px;
background-color: #e6e6e6;
}
.container .columns.content .content-container h1 {
font-weight: 700;
font-size: 35px;
color: #86b530;
margin-bottom: 20px;
font-family: "p22-underground", sans-serif;
font-weight: 600;
font-style: strong;
}
.container .columns.content .content-container p {
font-weight: 400;
font-size: 16px;
color: #333333;
margin-bottom: 20px;
margin-bottom: 15px;
text-align: justify;
font-family: "Assistant", sans-serif;
}
#media screen and (max-width: 767px) {
.container {
flex-flow: row wrap;
}
.container .columns.image {
display: block;
order: 1;
width: 100%;
height: 250px;
}
.container .columns.content {
display: block;
order: 2;
width: 100%;
}
.container .columns.content .content-container {
padding: 20px 35px;
}
.container .columns.content .content-container h1 {
margin-bottom: 5px;
}
}
<div class="container">
<div style="background-image: url('https://wallpaperset.com/w/full/a/c/7/185665.jpg');" class="columns image">
</div>
<div class="columns content">
<div class="content-container">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor
sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud.</p>
</div>
</div>
</div>
I tried to apply the different flex ratios and edited the media query, but to no success. I would prefer to keep the flex box instead of changing to a grid. If anyone has a solution, i would be very thankful.

Answer 1

For the equal (50%) column space distribution inside parent .container you used:
.container .columns {
flex: 0 0 auto;
width: 50%;
}
This was sufficient CSS as both columns were equally wide. However, for uneven distribution (60% vs. 40%) you will have to define per column how much parent space it gets:
.container .columns { flex: 0 0 auto }
.container .columns.image { width: 60% }
.container .columns.content { width: 40% }
On smaller devices (<960px) container .columns.content now gets a bit too narrow to my taste, but that's another problem to solve. Maybe another #media with your original 50% distribution...