0

Не могу понять почему не флексы не совпадают по высоте с большим элементом(флекс). Попробовал 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>

1 ответ 1

0

Высота flex-элемента img-products вполне совпадает с высотой родительского flex-контейнера img-product. введите сюда описание изображения А высоту блока products-body внутри img-products определяет его содержимое (синий фон) и отступы (зелёный фон). введите сюда описание изображения Чтобы растянуть блок products-body на всю доступную высоту, предлагаю его родителю, элементу img-products тоже задать свойство display: flex, но уже с flex-direction: column, так как два элемента - изображение и информационный блок должны располагаться друг под другом, а самому элементу products-body, чтобы растянуть его на всю доступную высоту, задать свойство flex-grow: 1 (справка)

Теперь блок products-body будет растягиваться на всю доступную высоту родительского контейнера (за вычетом высоты изображения выше). введите сюда описание изображения

P.S. Для красоты стоит ещё добавить элементам products-body свойства display: flex; flex-direction: column;, а блоки product-footer прижать вниз с помощью свойства margin-top: auto;

*{
      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 {
        display: flex;
        flex-direction: column;
      }

    .picture-product{
      width: 300px;
      padding: 25px 25px 0 25px;
      }

    .products-body{
      width: 300px;
      border: 2px solid #b59f5b;
      padding: 55px 25px 25px 25px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }

    .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;
      margin-top: auto;
    }

    .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;
    }
<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="" 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="" 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="" 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>

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.