Try using flex-grow.
Try adding flex-grow: 1; to your CSS Classes instead of flex:.
“The flex-grow CSS property sets the flex grow factor of a flex item main size.”
.pic {
flex-grow: 1;
overflow: hidden;
object-fit: cover;
display: block;
object-position: center center;
align-self: stretch;
max-height: 100%;
}
.text {
flex-grow: 1;
margin: 0;
}
Demo:
https://codepen.io/HugoGiraudel/pen/9a9ad8fb040f5efaf4e749b49cae7281
References:
i have problem with product card i making, something like this, if we make it simple:
.container {
width: 600px;
display: flex;
align-items: flex-start;
}
.pic {
flex: 0 0 60%;
overflow: hidden;
object-fit: cover;
display: block;
object-position: center center;
align-self: stretch;
max-height: 100%;
}
.text {
flex: 0 0 40%;
margin: 0;
}<div class="container">
<img class="pic" src="https://s3-eu-west-1.amazonaws.com/pravdasevera/p6bjtv0x/ub9z.jpg" alt="">
<p class="text">
Dignissimos, consequuntur. Ipsam totam aliquid obcaecati ipsum similique reiciendis enim soluta dolor nam eveniet at officiis delectus rem velit vero nulla doloribus, repellat, natus assumenda nemo sapiente? Eaque, veniam architecto? Unde corporis facilis
perferendis quos exercitationem ab, qui repudiandae amet assumenda repellendus ipsam velit beatae voluptatibus maxime accusantium quas omnis nobis voluptate, aspernatur saepe recusandae est iure similique. Esse, natus?
</p>
</div>i need img part to be the same size as p. i can make it othervise – text part will resize accordingly to img, but i need it other way around.
Thanks for help!
but isn’t width of
i am talking about height resizing, sorry i didn’t make it clear…i need img to be the same height as p, but not with fixed height, but auto resizing