Не могу понять почему не флексы не совпадают по высоте с большим элементом(флекс). Попробовал align-items: stretch
- не помогает. Высоту фиксированную задавать не хочу.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.product{
max-width: 1200px;
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
margin-bottom: 55px;
}
.title-product{
font-size: 20px;
font-weight: bold;
line-height: 24px;
text-transform: uppercase;
text-align: center;
}
.title-product::after{
content: " ";
display: block;
width: 64px;
margin-top: 8px;
margin-bottom: 23px;
margin-left: auto;
margin-right: auto;
border: 2px solid #e1d9bd;
background-color: #e1d9bd;
}
.img-product{
display: flex;
align-items: stretch;
justify-content: space-between;
}
/* .img-products{
position: relative;
} */
.picture-product{
width: 300px;
padding: 25px 25px 0 25px;
}
.products-body{
width: 300px;
/* height: 270px; */
border: 2px solid #b59f5b;
padding: 55px 25px 25px 25px;
/* position: relative;
top: -50px; */
}
.product-title{
font-size: 19px;
line-height: 24px;
margin-bottom: 15px;
text-transform: uppercase;
}
.product-body{
margin-bottom: 25px;
}
.product-text{
font-size: 14px;
font-weight: 400;
line-height: 22px;
color: #0f0d0e;
}
.text{
color: #b59f5b;
text-decoration: none;
}
.product-footer{
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.product-prices{
display: flex;
flex-direction: column;
}
.product-price-olds{
text-decoration: line-through;
font-size: 11px;
font-weight: 600;
}
.product-rub{
font-size: 14px;
font-weight: 600;
}
.product-price{
font-size: 17px;
font-weight: 600;
}
.product-button{
width: 137px;
height: 46px;
border: none;
background-color: #b59f5b;
text-transform: uppercase;
text-decoration: none;
color: white;
font-size: 14px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<article class="product">
<h2 class="title-product">наши изделия</h2>
<div class="img-product">
<div class="img-products">
<img class="picture-product" src="image/shop-item-desk1.jpg" alt="сад на подоконнике">
<div class="products-body">
<div class="product-body">
<div class="product-content">
<h3 class="product-title">подушки на диван</h3>
<p class="product-text">Набор из двух подушек с модными принтами. видео о создании <a class="text" href="#">здесь</a>.</p>
</div>
</div>
<div class="product-footer">
<div class="product-prices">
<span class="product-price-old">
<span class="product-price-olds">1000</span>
<span class="product-rub">р</span>
</span>
<span class="product-price">
<span class="product-price">800</span>
<span class="product-rub">р</span>
</span>
</div>
<button class="product-button" type="button">в магазин</button>
</div>
</div>
</div>
<div class="img-products">
<img class="picture-product" src="image/shop-item-desk2.jpg" alt="вкус сыра">
<div class="products-body">
<div class="product-body">
<div class="product-content">
<h3 class="product-title">кукла "слоник"</h3>
<p class="product-text">Интерьерная кукла "Слоник", созданию которой посвящена <a class="text" href="#">весенняя серия постов</a> в блоге и несколько подкастов.</p>
</div>
</div>
<div class="product-footer">
<div class="product-prices">
<span class="product-price-old">
<span class="product-price-olds"></span>
<span class="product-rub"></span>
</span>
<span class="product-price">
<span class="product-price">3500</span>
<span class="product-rub">р</span>
</span>
</div>
<button class="product-button" type="button">в магазин</button>
</div>
</div>
</div>
<div class="img-products">
<img class="picture-product" src="image/shop-item-desk3.jpg" alt="поход в горы">
<div class="products-body">
<div class="product-body">
<div class="product-content">
<h3 class="product-title">шестиугольная рамка</h3>
<p class="product-text">Необычная рамка для украшения дома из видео <a class="text" href="#">"Как сделать рамку из подручных средств за 30 минут"</a>.</p>
</div>
</div>
<div class="product-footer">
<div class="product-prices">
<span class="product-price-old">
<span class="product-price-olds">500</span>
<span class="product-rub">р</span>
</span>
<span class="product-price">
<span class="product-price">400</span>
<span class="product-rub">р</span>
</span>
</div>
<button class="product-button" type="button">в магазин</button>
</div>
</div>
</div>
</div>
</article>
</body>
</html>