Влияние контена элемента на flex-grow

170

20 января 2020, 19:30

Как сделать, чтобы при такой верстке, контент (во втором примере) не влиял на ширину элементов и при этом сохранялась "резиновость"

.one, .two{ 
  display: flex; 
} 
.one__item{ 
  flex-grow: 10; 
  border: 1px solid red; 
  height: 20px; 
} 
.two__item{ 
  flex-grow: 10; 
  border: 1px solid blue; 
  height: 20px; 
}

  <div class="one"> 
      <div class="one__item">1</div> 
      <div class="one__item">1</div> 
      <div class="one__item">1</div> 
      <div class="one__item">1</div> 
      <div class="one__item">1</div> 
      <div class="one__item">1</div> 
      <div class="one__item">1</div>  
    </div> 
    <div class="two"> 
      <div class="two__item"></div> 
      <div class="two__item"></div> 
      <div class="two__item"></div> 
      <div class="two__item"></div> 
      <div class="two__item"></div> 
      <div class="two__item"></div> 
      <div class="two__item"></div> 
    </div> 
    <br> 
<br> 
<br> 
<br> 
<div class="one"> 
  <div class="one__item">133</div> 
  <div class="one__item">144444</div> 
  <div class="one__item">15555</div> 
  <div class="one__item">1634</div> 
  <div class="one__item">134</div> 
  <div class="one__item">134</div> 
  <div class="one__item">133</div>  
</div> 
<div class="two"> 
  <div class="two__item"></div> 
  <div class="two__item"></div> 
  <div class="two__item"></div> 
  <div class="two__item"></div> 
  <div class="two__item"></div> 
  <div class="two__item"></div> 
  <div class="two__item"></div> 
</div>

Answer 1

Добавьте параметр flex-basis: 0 (ну или любое значение в px или %, отличное от нуля)

.one, .two{ 
  display: flex; 
} 
.one__item{ 
  flex-grow: 10; 
  flex-basis: 0; 
  border: 1px solid red; 
  height: 20px; 
} 
.two__item{ 
  flex-grow: 10; 
  border: 1px solid blue; 
  height: 20px; 
}

<div class="one"> 
      <div class="one__item">1</div> 
      <div class="one__item">1</div> 
      <div class="one__item">1</div> 
      <div class="one__item">1</div> 
      <div class="one__item">1</div> 
      <div class="one__item">1</div> 
      <div class="one__item">1</div>  
    </div> 
    <div class="two"> 
      <div class="two__item"></div> 
      <div class="two__item"></div> 
      <div class="two__item"></div> 
      <div class="two__item"></div> 
      <div class="two__item"></div> 
      <div class="two__item"></div> 
      <div class="two__item"></div> 
    </div> 
    <br> 
<br> 
<br> 
<br> 
<div class="one"> 
  <div class="one__item">133</div> 
  <div class="one__item">144444</div> 
  <div class="one__item">15555</div> 
  <div class="one__item">1634</div> 
  <div class="one__item">134</div> 
  <div class="one__item">134</div> 
  <div class="one__item">133</div>  
</div> 
<div class="two"> 
  <div class="two__item"></div> 
  <div class="two__item"></div> 
  <div class="two__item"></div> 
  <div class="two__item"></div> 
  <div class="two__item"></div> 
  <div class="two__item"></div> 
  <div class="two__item"></div> 
</div>

Answer 2

В простейшем случае так (если не поможет, то надо absolute'ы раскладывать):

.one, .two{ 
  display: flex; 
} 
.one__item{ 
  flex: 10 0 0px; 
  border: 1px solid red; 
  height: 20px; 
} 
 
.two__item{ 
  flex: 10 0 0px; 
  border: 1px solid blue; 
  height: 20px; 
}

<div class="one"> 
      <div class="one__item">1</div> 
      <div class="one__item">1</div> 
      <div class="one__item">1</div> 
      <div class="one__item">1</div> 
      <div class="one__item">1</div> 
      <div class="one__item">1</div> 
      <div class="one__item">1</div>  
    </div> 
    <div class="two"> 
      <div class="two__item"></div> 
      <div class="two__item"></div> 
      <div class="two__item"></div> 
      <div class="two__item"></div> 
      <div class="two__item"></div> 
      <div class="two__item"></div> 
      <div class="two__item"></div> 
    </div> 
    <br> 
<br> 
<br> 
<br> 
<div class="one"> 
  <div class="one__item">133</div> 
  <div class="one__item">144444</div> 
  <div class="one__item">15555</div> 
  <div class="one__item">1634</div> 
  <div class="one__item">134</div> 
  <div class="one__item">134</div> 
  <div class="one__item">133</div>  
</div> 
<div class="two"> 
  <div class="two__item"></div> 
  <div class="two__item"></div> 
  <div class="two__item"></div> 
  <div class="two__item"></div> 
  <div class="two__item"></div> 
  <div class="two__item"></div> 
  <div class="two__item"></div> 
</div>