求助：右侧浮动宽图无法正常显示自适应水平滚动条

你之前的问题出在给浮动容器设置了固定宽度，导致它无法根据视口宽度收缩触发滚动。只需调整容器的宽度约束和滚动属性，就能实现窄屏显示滚动条、大屏隐藏的效果：

修改后的CSS代码 #

.outer_container {
  border: 1px solid #c8ccd1;
  background-color: #f8f9fa;
  float: right;
  padding: 3px;
  margin: 0.5em 0 1.3em 1.4em;
  /* 核心调整：限制最大宽度为视口可用宽度，超出时显示滚动条 */
  max-width: calc(100vw - 1.4em); /* 减去左侧margin，避免容器超出视口 */
  overflow-x: auto;
  /* 保证大屏下容器不会被过度压缩，能容纳图片容器 */
  min-width: fit-content;
}

.annotated_img_container {
  background-color: white;
  border: 1px solid #c8ccd1;
  position: relative;
  /* 移除内部float，父容器已浮动，无需重复设置 */
}

.caption_text {
  clear: both;
  font-size: smaller;
  max-width: 400px;
  padding: 0.5em 0 0 2px;
}

关键修改说明 #

• max-width: calc(100vw - 1.4em)：把浮动容器的最大宽度限制为视口宽度减去左侧的1.4em margin，确保窄屏中容器不会超出浏览器可视范围。
• overflow-x: auto：当容器内部的图片容器宽度超过当前容器宽度时，自动显示水平滚动条；空间足够时滚动条自动隐藏，完全符合你的需求。
• min-width: fit-content：确保在大屏设备上，容器不会被压缩到比图片容器还窄，保持图片的正常显示。
• 移除annotated_img_container的float: right：父容器已经是浮动状态，内部元素再设置浮动会导致布局混乱，移除后能保证容器高度正常计算。

调整后的HTML（内联样式可保留，无需改动） #

<h2>Title</h2>
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
</p>
<div class="outer_container">
  <div class="annotated_img_container" style="width: 382.4px; padding-top: 57.7px; padding-bottom: 76px;">
    <figure><img src="//upload.wikimedia.org/wikipedia/commons/thumb/1/11/Reading-Glasses.jpg/300px-Reading-Glasses.jpg" width="300" height="128">
    </figure>
  </div>
  <p class="caption_text" style="max-width: 382.4px;">Eyeglasses parts.</p>
</div>
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
</p>

调整后，当浏览器窗口足够宽时，浮动容器会保持图片所需的宽度，滚动条自动隐藏；当窗口窄到无法容纳图片容器时，容器会收缩到视口可用宽度，同时显示水平滚动条供用户查看完整图片。

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