css - 如何使用 scss 修复 div 宽度( react )

Question

我想修复 div 宽度(图像)并获得滚动条。但添加'div'越多，wrapper 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;
}

我得到的结果如下(截图)(请忽略其他按钮。)

screen shot

screen shot2

图片越多，图片越小。

我想要包装器 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，因为您要么使用 float 元素，要么使用 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;
}

结果为:Demo here