如何在Flex布局中实现固定宽度图片的水平滚动

实现左右分栏的Flex布局，右侧栏内包含一个可水平滚动的固定宽度图片容器，但当前图片父容器会溢出，需要让子容器能够水平滚动且父容器保持在Flex布局内。

问题根源在于Flex布局中，子项的默认最小尺寸会被内容撑开，导致父容器无法限制宽度。只需给图片滚动区域的直接父容器（.container）添加宽度限制和最小宽度设置，同时确保滚动容器占满父容器宽度：

.container {
  width: 100%;
  min-width: 0; /* 允许容器宽度收缩到小于内容宽度 */
}

.scrollable {
  width: 100%; /* 确保滚动容器占满父容器宽度 */
}

CSS #

.dash {
  display:flex;
  width:100%;
}

.left {
  width: 380px;
  height: 100vh;
}

.right {
  flex: 1 1 0%;
  display:flex;
  flex-direction: column;
}

.b {
  border:1px solid black;
}

.ig {
  display:inline-block;
  height:100px;
  width:180px;
  object-fit: cover;
}

.scrollable {
  width: 100%;
  white-space: nowrap;
  overflow-x:scroll;
}

.box {
  display: inline-block;
}

.container {
  width: 100%;
  min-width: 0;
}

HTML #

<div class="dash">
  <div class="left b">
    left
  </div>

  <div class="right b">
    <div>
      top section
    </div>
    <div class="container">
      <!-- necessary -->
      <div>
        scrollable section title
      </div>
    
      <!-- need this to be scroll -->
      <div class="scrollable">
        <div class="box">
                <img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
                <div>
                img caption
                </div>
        
        </div>
        <div class="box">
                <img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
                <div>
                img caption
                </div>
        
        </div>
        <div class="box">
                <img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
                <div>
                img caption
                </div>
        
        </div>
        <div class="box">
                <img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
                <div>
                img caption
                </div>
        
        </div>
        <div class="box">
                <img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
                <div>
                img caption
                </div>
        
        </div>
        <div class="box">
                <img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
                <div>
                img caption
                </div>
        
        </div>
       
      </div>
      
      
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Sai Datta