0

На примере слева в красном блоке зеленых квадрата 4, 2 из них перенеслись (скрылись) из-за свойства flex-wrap. Можно ли увеличивать ширину блока #list_block или #list при нехватке места, чтобы все зеленые квадраты были видны?

#parent_block{
  background: blue;
  padding: 5px;
  width: 700px;
  height: 200px;
  display: flex;
}
#list_block{
  
}
#list{
  display: flex;
    flex-wrap:wrap;
    flex-direction: column;
  background: red;
  height: 100%;
}
  .list_child{
    width:50px;
    height:50px;
    background: green;
    margin: 10px;
  }
#second_block{
  background:brown;
}
  <div id="parent_block">
    <div id="list_block">
      <div id="list">
        <div class="list_child"></div>
        <div class="list_child"></div>
        <div class="list_child"></div>
        <div class="list_child"></div>
      </div>
    </div>
    <div id="second_block">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, atque consequuntur facere sit dolorem commodi accusamus eius debitis sequi porro dolor quam laboriosam consequatur. Molestiae totam minima cupiditate debitis accusamus?
    </div>
  </div>

2
  • Так уберите flex-wrap: wrap, и тогда все зелёные будут видны. Или что именно Вам надо? 17 сен 2019 в 9:58
  • Вот другойпример. Почему при увеличении масштаба синий блок (flex-direction: column) не может увеличить ширину, когда в него не помещаются все дочерние красные квадраты, а черный блок (flex-direction: row) увеличивает свою высоту, чтобы в него поместились все дочерние желтые квадраты, при этом смещая соседний блок под собой? Надеюсь теперь более понятно какой вопрос меня мучает.
    – Paprika
    17 сен 2019 в 14:38

2 ответа 2

0

Из

#parent_block {
        background: blue;
        padding: 5px;
        width: 700px;
       height: 200px; 
        display: flex;
    }

Уберите height: 200px; Должно сработать

3
  • Спасибо, но высота должна быть фиксированной
    – Paprika
    17 сен 2019 в 12:28
  • @Paprika Попробуйте так #list_block { width: 100%; }
    – Arcadiy
    17 сен 2019 в 14:37
  • Arcadiy, мне нужно, чтобы родитель подстраивал свою ширину, чтобы в него помещались все дочерние квадраты при изменении масштаба. В вашем случае, если я уменьшу масштаб, в блоке #list_block останется пустое место, так как все дочерние квадраты вполне умещаются на одной линии, а если сильно увеличу масштаб, не все дочерние квадраты поместятся в родителе и опять "вылезут" за его пределы и исчезнут
    – Paprika
    17 сен 2019 в 14:40
0

Можно ли увеличивать ширину блока #list_block или #list при нехватке места, чтобы все зеленые квадраты были видны?

Для блока #list_block задайте свойство flex-basis: 100%;.

Результат:

#parent_block {
  background: blue;
  padding: 5px;
  width: 700px;
  height: 200px;
  display: flex;
}

#list_block {
  flex-basis: 100%;
}

#list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  background: red;
  height: 100%;
}

.list_child {
  width: 50px;
  height: 50px;
  background: green;
  margin: 10px;
}

#second_block {
  background: brown;
}
<div id="parent_block">
  <div id="list_block">
    <div id="list">
      <div class="list_child"></div>
      <div class="list_child"></div>
      <div class="list_child"></div>
      <div class="list_child"></div>
    </div>
  </div>
  <div id="second_block">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, atque consequuntur facere sit dolorem commodi accusamus eius debitis sequi porro dolor quam laboriosam consequatur. Molestiae totam minima cupiditate debitis accusamus?
  </div>
</div>

Этот же пример на CodePen

введите сюда описание изображения

1
  • Спасибо, но не совсем то, что нужно, я немного изменил свой пример, чтобы стало понятнее. При увеличении масштаба некоторые зеленые квадраты не помещаются и исчезают, а при уменьшении масштаба наоборот. Я бы хотел, чтобы при увеличении масштаба появление дополнительной линии, куда помещаются не поместившиеся зеленые квадраты, сопровождалось подстраиванием (в плане размеров) под них родительского элемента
    – Paprika
    17 сен 2019 в 12:23

Ваш ответ

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

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