Горизонтальный прокручиваемый div с flexgrow на основном контейнере

Question

Я использую Material UI, для контейнера у него есть свойство flexgrow:1

Я пытаюсь иметь прокручиваемый горизонтальный div, содержащий карты, на самом деле все просто, если в подходе не было flexgrow.

Для простой прокрутки я мог бы использовать это , но из-за гибких свойств, которые я до сих пор не понимаю, я сейчас бьюсь головой об стену.(примечание: если у вас есть отличная справка, позволяющая мне понять, как она полностью работает, я был бы очень признателен).

CSS:

.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: row;

  .card {
    display: flex;
    flex: 1;
    width: 320px;
    height: 180px;
    margin: 15px;
    padding: 15px;
  }
}

HTML:

<div className="scrolling-wrapper">
    <Card className="card">Test</Card>
    <Card className="card">Test</Card>
    <Card className="card">Test</Card>
    <Card className="card">Test</Card>
    <Card className="card">Test</Card>
    <Card className="card">Test</Card>
</div>

Для простоты я минимизировал все.

Что происходит, когда я устанавливаю width: 100% or 100vw, он выходит за пределы экрана.100% не заполняет родительскую ширину, а 100vw добавляет ширину моей боковой панели вместо vw.Это означает, что вместо этого полоса прокрутки окажется на scrolling-wrapper, к которой она прикреплена к самому базовому контейнеру.

Answer 1

Заменить

.scrolling-wrapper .card { 
  ...
  flex: 1;
  width: 320px;
  ...
}

на:

.scrolling-wrapper .card {
  ...
  flex: 0 0 320px; 
  ...
}

Посмотреть здесь .

---

Объяснение : flex: 1; width: 320px;, в вашем случае, переводится как:

flex-grow: 1;    /* I grow if there's available space      */
flex-shrink: 1;  /* I shrink if there's not enough space   */
flex-basis: 0%;  /* initial flex-basis (width): 0%         */
width: 320px;    /* ignored (overwritten by `flex-basis`)  */

Вы не хотите, чтобы ваша карта росла, если есть дополнительное пространство:

flex-grow: 0;

Вы не хотите, чтобы ваша картакарта уменьшается в размерах:

flex-shrink: 0;

Вы хотите, чтобы ваша карта начиналась с ширины 320px

flex-basis: 320px;

* 1027 и оставалась на ней * Вам не нужноwidth.
Кроме того, если у вас есть случай, когда карты не заполняют всю ширину контейнера, вы, вероятно, захотите установить

.scrolling-wrapper {
  overflow-x: auto;
}

(вместо scroll), поэтомувы не используете бесполезную полосу прокрутки.

---

И теперь, когда я ответил на ваш вопрос, мне нужно задать себе один вопрос: почему вы показываете карточки с flexbox?Поскольку flexbox внутри .scrolling-wrapper не имеет ничего , связанного с flexbox, частью которого он является.

Единственная причина показывать карты с помощью flexbox - если вы хотите, чтобы они распределялись, когда карт недостаточно для заполнения ширины контейнера, с помощью justify-content: space-between;, но это не так.случай.

Как вы можете видеть, это можно сделать с помощью flexbox, но очень хорошо это можно сделать с display: block; white-space: nowrap;, как в статье, которую вы связали, , а .scrolling-wrapperимеет flex-grow: 1, поэтому он распространяется на все доступное пространство (при условии, что другие дочерние элементы имеют flex-grow: 0).В настоящее время вы не даете никакой информации о том, что происходит за пределами .scrolling-wrapper, и я считаю, что именно с этим у вас проблемы.