总长不固定，左侧固定，右侧不固定，怎么解决右侧撑开父元素的问题

为了实现总长不固定，左侧固定，右侧不固定并且防止右侧元素撑开父元素的情况，你可以使用CSS的浮动（Float）或者Flexbox布局。

1. **浮动（Float）**:

   <style>
   .parent {
     position: relative; /* 防止塌陷 */
   }
   
   .fixed-left {
     float: left;
     width: 150px; /* 定义左侧固定宽度 */
   }
   
   .unfixed-right {
     float: right;
     /* 不设定宽度，让其自然伸展直到父元素边缘 */
   }
   </style>

确保父元素(`.parent`)应用了相对定位，以便容纳浮动的元素。

2. **Flexbox**:

   <style>
   .parent {
     display: flex;
     /* flex-wrap: wrap; 如果需要换行 */
   }
   
   .fixed-left {
     flex: 0 0 150px; /* 左侧定宽，不可生长 */
   }
   
   .unfixed-right {
     flex: 1; /* 右侧自动填充满剩余空间 */
   }
   </style>

在这两种方法中，只要对`.fixed-left`设定了固定宽度， `.unfixed-right`就可以自由伸缩，不会撑破父元素。记得处理可能出现的清除浮动（对于浮动布局）或结束弹性盒布局（对于Flexbox）的溢出问题。