0

div c классом videoInadvantageLund имеет заданную ширину 565px, по факту в браузере он имеет размер 386,64px. Причем он ведет себя так, только когда является flex элементом. Когда я у родителя убираю display: flex, элемент принимает заданные размеры.

p.s В дублирующем блоке, который находится ниже, вместо div есть img, с ней таких проблем нет, она занимает свой фактический размер.

HTML:

<section class="advantageLund">
    <h2>Баланс прочности и надежности</h2>
    <div class="contentadvantageLund">
        <div class="blockContentAdvantageLund">
            <div class="videoInadvantageLund">
            </div>
            <div class="descriptionAdvantageLund">
                <h3>Непревзойденная производительность</h3>
                <p>Технология IPS, IPS2, и IPS3 Lund исключительная обеспечивает бесподобный контроль и более ровную, более сухую езду.</p>
                <hr>
            </div>
        </div>
        <div class="blockContentAdvantageLund">
            <div class="descriptionAdvantageLund">
                <h3>Непревзойденная производительность</h3>
                <p>Технология IPS, IPS2, и IPS3 Lund исключительная обеспечивает бесподобный контроль и более ровную, более сухую езду.</p>
                <hr>
            </div>
            <img src="image/banners/banner-advantage.jpg" alt="">
        </div>
    </div>
</section>

CSS:

/* Start advantage Lund */
.advantageLund {
  width: 100%;
  background-color: #fbfbfd;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 86px 0 107px 0;
}
.advantageLund > h2 {
  color: #333333;
  font-family: "Montserrat", sans-serif;
  font-size: 48px;
  font-weight: 600;
  line-height: 36.71px;
  text-transform: uppercase;
  letter-spacing: 4.8px;
  margin-bottom: 87px;
}
.contentadvantageLund {
  width: 63vw;
  max-width: 1209px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.blockContentAdvantageLund {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.blockContentAdvantageLund > img:nth-child(odd) {
  margin-right: 113px;
}
.blockContentAdvantageLund > img:nth-child(even) {
  margin-left: 113px;
}
.blockContentAdvantageLund:not(:last-child) {
  margin-bottom: 53px;
}

.descriptionAdvantageLund > h3 {
  color: #96050b;
  font-family: "Montserrat", sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 56px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.descriptionAdvantageLund > p {
  color: #12132a;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 41px;
  margin-bottom: 39px;
}
.descriptionAdvantageLund > hr {
  margin: 0;
  border: 0;
  width: 86%;
  height: 8px;
  background-color: #96050b;
}
/* End Advantage Lund  */
.videoInadvantageLund {
  width: 565px;
  height: 400px;
  background: url(../image/logo/maxresdefault.webp) no-repeat;
  background-size: cover;
}

2 ответа 2

3

Проблема решается либо добавлением flex-shrink: 0; к .videoInadvantageLund, как указали выше, либо добавлением min-width к оному элементу. В обеих случаях элемент не дает себя сжимать, но вариант с flex-shrink более грамотный.

0
2

Ну так задайте: flex-shrink: 0; для .videoInadvantageLund и будет счастье.

/* Start advantage Lund */
.advantageLund {
  width: 100%;
  background-color: #fbfbfd;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 86px 0 107px 0;
}
.advantageLund > h2 {
  color: #333333;
  font-family: "Montserrat", sans-serif;
  font-size: 48px;
  font-weight: 600;
  line-height: 36.71px;
  text-transform: uppercase;
  letter-spacing: 4.8px;
  margin-bottom: 87px;
}
.contentadvantageLund {
  width: 63vw;
  max-width: 1209px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.blockContentAdvantageLund {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.blockContentAdvantageLund > img:nth-child(odd) {
  margin-right: 113px;
}
.blockContentAdvantageLund > img:nth-child(even) {
  margin-left: 113px;
}
.blockContentAdvantageLund:not(:last-child) {
  margin-bottom: 53px;
}

.descriptionAdvantageLund > h3 {
  color: #96050b;
  font-family: "Montserrat", sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 56px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.descriptionAdvantageLund > p {
  color: #12132a;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 41px;
  margin-bottom: 39px;
}
.descriptionAdvantageLund > hr {
  margin: 0;
  border: 0;
  width: 86%;
  height: 8px;
  background-color: #96050b;
}
/* End Advantage Lund  */
.videoInadvantageLund {
  width: 565px;
  height: 400px;
  background: url(../image/logo/maxresdefault.webp) no-repeat;
  background-size: cover;
  flex-shrink: 0;
  background-color: #ccc;
}
<section class="advantageLund">
    <h2>Баланс прочности и надежности</h2>
    <div class="contentadvantageLund">
        <div class="blockContentAdvantageLund">
            <div class="videoInadvantageLund">
            </div>
            <div class="descriptionAdvantageLund">
                <h3>Непревзойденная производительность</h3>
                <p>Технология IPS, IPS2, и IPS3 Lund исключительная обеспечивает бесподобный контроль и более ровную, более сухую езду.</p>
                <hr>
            </div>
        </div>
        <div class="blockContentAdvantageLund">
            <div class="descriptionAdvantageLund">
                <h3>Непревзойденная производительность</h3>
                <p>Технология IPS, IPS2, и IPS3 Lund исключительная обеспечивает бесподобный контроль и более ровную, более сухую езду.</p>
                <hr>
            </div>
            <img src="image/banners/banner-advantage.jpg" alt="">
        </div>
    </div>
</section>

1
  • Спасибо, совсем забыл про это свойство.
    – mr.smile
    22 фев 2020 в 14:08

Ваш ответ

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

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