Очень запутался в Flex Shrink and Grow - PullRequest
Новая
       17

Очень запутался в Flex Shrink and Grow

0 голосов
/ 25 сентября 2018 
<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

.container {
  width: 100%;
  height: 200px;
  display: flex;
}

.box1 {
  width: 25%;
  min-width: 400px;
  height: 100%;
}

.box2 {
  width: 75%;
  height: 100%;
}

Так что я пытаюсь сделать div, который 100% ширина .Дочерние элементы будут 25% и 75% .Я хочу, чтобы у 25% div был min-width.Поэтому я хочу, чтобы 75% div автоматически корректировался, просто заполняя оставшееся пространство, когда минимальная ширина приносит box1 сверх 25% .

Мне кажется, что ни flex-grow, ни flex-shrink не работают.Я не хочу, чтобы box2 уменьшалось, потому что в большинстве случаев оно должно быть больше box1.Я не хочу, чтобы box2 рос, потому что иногда он будет меньше box1.

К вашему сведению: я должен отметить, что я использую это с ползунком slick.js.Однако мои два div'а не тронуты плагином, поэтому мой слайдер обернут в дополнительный контейнер (box2).Контейнер слайдера занимает 100% ширины бокса 2. Я знаю, что flex, кажется, корректируется на лету в таких ситуациях, как эта, поэтому, если бы у меня был абзац в box2, ширина будет корректироваться динамически, но наличие слайдера, кажется, делаетэто действительно привередливый, и ему нужно, чтобы содержащая box2 имела ширину, которая работает правильно.

1 Ответ

0 голосов
/ 25 сентября 2018 

.container {
  display: flex;
  height: 200px;
  border: 1px dashed black;
}

.box1 {
  flex: 1 0 400px; /* flex-grow, flex-shrink, flex-basis */
  max-width: 25%;
  background-color: green;
}

.box2 {
  flex-grow: 1;
  background-color: orangered;
}
<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

Итак, я пытаюсь сделать div с шириной 100%.

Готово.С display: flex устанавливается контейнер уровня блока, который занимает 100% ширины родительского элемента.

Дочерние элементы будут 25% и 75%.Я хочу, чтобы у 25% div была минимальная ширина.

Хорошо..box1 имеет минимальную ширину 400 пикселей (как установлено в вашем коде) и максимальную ширину 25%.

Поэтому я хочу, чтобы 75% div автоматически настраивался на заполнениеоставшееся пространство, когда минимальная ширина превышает 25%.

Тогда не используйте 75%.Вместо этого используйте flex-grow: 1, что говорит .box2 использовать пространство, не используемое .box1.

...