In my flex-container, I have two divs that I'd like positioned on the left and right sides of the container. When I use justify-content: space-between; without setting the width of the element, it functions as expected. However, when I set one of the elements to have a width of 40%, it shifts that element towards the center.
I attempted using flex-basis and max-width instead of width, but unfortunately, that did not resolve the issue.
.product-container {
background: #ecefef;
}
.product {
display: flex;
justify-content: space-between;
font-size: 16px;
}
.product-image {
width: calc(60rem/1.6);
}
.product .content {
font-size: calc(1.6rem/1.1);
width: 40%;
}
.title-text {
color: #000041;
font-size: calc(3rem/1.5);
font-family: circular-bold, sans-serif;
margin: 50px 0;
}<div class="product-container">
<div class="product">
<a name="lorem"></a>
<div class="content">
<div class="title-text">Lorem Ipsum</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div>
<img class="product-image" src="https://lorem.com" alt="lorem">
</div>
</div>
</div>Despite having justify-content: space between; set on the container, I expect the content to remain on the left side of the flexbox even with a width property applied. Yet, it continues to shift towards the center.