滚动容器内.cart-display元素边框仅显示可视区域的修复咨询

问题场景 #

类为ImageArea的滚动容器内，渲染的.cart-display元素边框仅显示在容器可视区域，滚动后内容超出部分无边框。相关代码如下：

容器JSX代码 #

<div class="ImageArea"
     onClick={(e)=>onClickBox(e,_.id)}
     style={{
       width: "calc(52.9% - 12px)", 
       height: "calc(46% - 7px)", 
       bottom: "6.68%", 
       left: "108.5%",
       overflow: "scroll"
     }}
>
  {/* 内部渲染galley_box组件及showCartDesign生成的内容 */}
</div>

生成.cart-display的函数代码 #

const showCartDesign=(crt,id)=>{
  if(crt.length){
    const cartStat=crt.map(c=>(
      <>
        <div className="cart-display">
          <div className="flexRow" style={{padding:'0.5rem'}}>
            <b className='cart-title'>{c.code}</b>
            <u className="cart-type">{getCartType(c.cartType)}</u>
            <img className="galley-icons" src={plus} onClick={(e)=>onClickAddCart(e,id)} alt='GalleyAdd'/>
            <img className="galley-icons" src={minus} onClick={(e)=>onClickRemoveCart(e,id,c.code)} alt='GalleyRemove'/>
            <img className="galley-icons" src={editGalleyItem} onClick={(e)=>onClickEditCart(e,id,c.code)} alt='GalleyEdit'/>
            <br/>
          </div>
          {getTrolleyItems(c,id)}
        </div>
      </>
    ))
    return cartStat
  }
}

const getTrolleyItems=(tr,id)=>{
  if(tr){
    const listItems = tr.typesOfItems?.map((i,index) => (
      <li className="box-items" key={index}>{i.name}</li>
    ))
    const count=listItems?.length>1?'items':'item'
    return (
      <>
        <div className="list-items" style={{lineHeight:'1.5rem',color:"#ffffff",display:'flex',fontWeight:'bold',margin:'0.5rem 0rem 0.5rem 0rem',justifyContent:'center'}}>
          {`${listItems?.length} ${count}`}
        </div>
        <ul className="galley-list">{listItems}</ul>
      </>
    );
  }
}

原始CSS样式 #

.cart-display{
  border:0.3px solid grey;
  background-color:#1d3e4e;
  margin-top:0.5rem;
  border-radius: 5px
}
.cart-label{
  outline:1px solid;
  padding:3px;
  top: 5;
  z-index: 1;
  position:'sticky';
  background-color:'#bebebe'
}
.cart-title{
  outline: 1px solid;
  padding: 3px;
  background-color: #bebebe;
}
.cart-type{
  outline: none;
  padding: 3px;
  background-color: #bebebe;
  margin-left: 1rem;
  white-space: nowrap;
}
.box-items{
  line-height: 1.5rem;
  text-align: left;
  padding: 0.3rem;
  list-style-type: circle;
  float: left;
  color: #ffffff;
}

问题原因 #

1. .cart-display作为块级元素，默认宽度继承自父容器ImageArea的可视宽度，当内部内容横向溢出时，元素本身宽度未跟随内容撑开，导致边框仅覆盖可视区域。
2. .box-items使用float:left，可能导致父元素宽度计算异常，无法正确包裹浮动内容。

修复方案 #

1. 让.cart-display宽度适配内容 #

给.cart-display添加宽度适配规则，让元素宽度跟随内容自动调整：

.cart-display{
  border:0.3px solid grey;
  background-color:#1d3e4e;
  margin-top:0.5rem;
  border-radius: 5px;
  min-width: fit-content; /* 确保宽度至少适配内容 */
  width: fit-content; /* 可选：完全由内容决定宽度 */
}

2. 替换浮动布局避免宽度异常 #

将.box-items的float:left替换为display: inline-block，保持横向排列的同时避免浮动导致的布局问题：

.box-items{
  line-height: 1.5rem;
  text-align: left;
  padding: 0.3rem;
  list-style-type: circle;
  /* float: left; 移除浮动 */
  display: inline-block; /* 替换为inline-block */
  margin-right: 1rem; /* 增加横向间距 */
  color: #ffffff;
}

3. 确保内部容器不限制宽度 #

检查.flexRow等内部容器，避免设置固定宽度或overflow: hidden，确保内容可以自然撑开父元素。

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