Как исправить ширину div, используя scss (с реагировать)

Question

Я хочу исправить ширину div (изображение) и получить полосу прокрутки.Но чем больше добавить 'div', тем меньше ширина div в области div оболочки.Полоса прокрутки не отображается.

Это обертка изображения ниже.

<div className="image-list-wrapper">{imageList}</div>

{imageList} добавляются нажатием кнопки «div»

    let imageList;
    if(images){
      imageList = images
        .map((image, i) => {
          return(
          <div key={i} className="image-list-item">
            <img className="image-resize" src={`http://localhost:5000`+image}/>
          </div>
          )
      })
    }

и CSS (SCSS)

.image-list-wrapper {
  margin: auto;
  margin-top: 1.5rem;
  width: 95%;
  height: 12rem;
  border: 1px solid #bcbaba;
  overflow-x: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.image-list-item {
  float: left;
  width: 9rem;
  height: 9rem;
  margin: 0.5rem;
  margin-top: -0.5rem;
}

.image-resize {
  width: 100px;
  height: 160px;
}

Я получил результат ниже (скриншот) (пожалуйста, игнорируйте другие кнопки.)

снимок экрана

снимок экрана2

Чем больше изображений, тем меньше изображения.

Мне нужна полоса прокрутки и фиксированная ширина элементов div в оболочке div.

Answer 1

Ваш код будет генерировать что-то вроде этого:

<div class="image-list-wrapper">
  <div key="0" class="image-list-item">
    <img class="image-resize" src="https://via.placeholder.com/200x160">
  </div>
  <div key="1" class="image-list-item">
    <img class="image-resize" src="https://via.placeholder.com/200x160">
  </div>
  <div key="2" class="image-list-item">
    <img class="image-resize" src="https://via.placeholder.com/200x160">
  </div>
  <div key="3" class="image-list-item">
    <img class="image-resize" src="https://via.placeholder.com/200x160">
  </div>
  <div key="4" class="image-list-item">
    <img class="image-resize" src="https://via.placeholder.com/200x160">
  </div>
  <div key="5" class="image-list-item">
    <img class="image-resize" src="https://via.placeholder.com/200x160">
  </div>
  <div key="6" class="image-list-item">
    <img class="image-resize" src="https://via.placeholder.com/200x160">
  </div>
</div>

, и вы должны удалить float left, потому что вы либо используете плавающие элементы, либо используете flexbox.

.image-list-wrapper {
  margin: auto;
  margin-top: 1.5rem;
  width: 95%;
  height: 12rem;
  border: 1px solid #bcbaba;
  overflow-x: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.image-list-item {
  width: 9rem;
  height: 9rem;
  margin: 0.5rem;
  margin-top: -0.5rem;
}

.image-resize {
  width: 100px;
  height: 160px;
}

, что приводит к этому: Демо здесь