При display: flex на элементах внутри не работает установка ширины в %. Только в абсолютных величинах, что может быть не так?

Рейтинг: 0Ответов: 1Опубликовано: 01.03.2023
<div class="f1">    
<div class="block clearfix">
    <div class="pic1"><span>текст</span></div>
    <div class="pic2"><span>текст</span></div>
</div>
</div>

<div class="f2">
<h1>Манул</h1>
</div>

<div class="f3">
<p class="firstP">текст</p>
</div>



<div class="f4">
<p class="secP">текст</p>
</div>

<div class="f5">
<p class="thirP">текст</p>
</div>

@media (max-width: 600px){
.main{
    display: flex;
    justify-content:space-around;
    flex-wrap:wrap; 
    width: 100%;
}

.f2{order: 1;}
.f3{order: 2;}
.f1{order: 3;}
.f4{order: 4;}
.f5{order: 5;}

.pic1,.pic2{
    width: 400px;
    transform: translateX(-25%);
    }

}
css html frontend
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Я вот воспроизвёл, то что вы хотели. ставит вполне 100%;

.main{
    display: flex;
    flex-wrap: wrap; 
    gap: 30px;
    width: 100%;
}
div {
  display: block;
}
.pic1,.pic2{
  display: block;
  width: 100%;
  border: 1px solid blue;
}
.f1, .f2, .f3, .f4, .f5 {
  display: block;
  width: calc(50% - 15px);
  box-sizing: border-box;
  border: 1px solid #000;
  padding: 15px;
}
<div class="main">
  <div class="f1">    
    <div class="block clearfix">
        <div class="pic1"><span>текст</span></div>
        <div class="pic2"><span>текст</span></div>
    </div>
  </div>

  <div class="f2">
    <h1>Манул</h1>
  </div>

  <div class="f3">
    <p class="firstP">текст</p>
  </div>

  <div class="f4">
    <p class="secP">текст</p>
  </div>

  <div class="f5">
    <p class="thirP">текст</p>
  </div>
</div>