Сделайте так, чтобы гибкие элементы росли одинаково (и расширяли родительский контейнер) - PullRequest
Новая
       45

Сделайте так, чтобы гибкие элементы росли одинаково (и расширяли родительский контейнер)

1 голос
/ 06 мая 2020

Я хотел бы динамически увеличивать содержимое в некоторых гибких элементах и ​​во всех других элементах, чтобы всегда иметь размер самого большого брата. Моя проблема в том, что я также хотел бы, чтобы элементы увеличивали размер контейнера, который не имеет фиксированных размеров. Вот скрипка, которую должно быть легче понять: https://jsfiddle.net/uxjs5eL6/3/ Я хочу иметь возможность нажимать кнопку n раз, и все оранжевые квадраты останутся одинакового размера, продолжая расти.

Is это возможно даже с помощью flexbox? Если нет, то как я могу добиться желаемого эффекта?

Вот код из JSFiddle, так как мне нужно предоставить некоторые: 

var dimension = 180;

function grow() {
  document.getElementById("grower").style.height = dimension + "px";
  document.getElementById("grower").style.width = dimension + "px";
  dimension = dimension + 20;
}
.container {
  display: flex;
  min-width: 200px;
  min-height: 200px;
}

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  background-color: orange;
  border: 1px solid grey;
}

#grower {
  width: 160px;
  height: 160px;
  background-color: yellow;
}
<button onclick="grow()">
Grow!
</button>

<div class="container">
  <div class="item">
    <div id="grower">
    
    </div>
  </div>
  <div class="item">
    
  </div>
  <div class="item">
    
  </div>
</div>

1 Ответ

0 голосов
/ 06 мая 2020

Если вы установите для элемента определенную c ширину, тогда flex-box не будет работать, важно установить ширину? Если вы установите только высоту и как 100%, тогда он будет работать. В конце концов вы можете установить overflow: hidden в .item, но я предполагаю, что обрезка контента будет плохой

...