css flex 一行2个元素 不能挤压空间

html 复制代码
    <div class="step_title">
         <span class="step_title_text">{{ item2.eventAt }} </span>
         <span class="step_title_text2"> {{ item2.event }}</span>
     </div>
css 复制代码
 .step_title {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    .step_title_text {
      display: inline-block;
      min-width: 200px;
      width: 200px;
      flex-shrink: 0;
    }
    .step_title_text2 {
      flex: 1;  
      word-break: break-word;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
  }
相关推荐
ObjectX前端实验室12 分钟前
从零到一:系统化掌握大模型应用开发【目录】
前端·llm·agent
guoyp212619 分钟前
前端实验(二)模板语法
前端·vue.js
葡萄城技术团队25 分钟前
Excel 转在线协作难题破解:SpreadJS 纯前端表格控件的技术方案与实践
前端·excel
我的xiaodoujiao25 分钟前
Windows系统Web UI自动化测试学习系列3--浏览器驱动下载使用
前端·windows·测试工具·ui
一只小风华~27 分钟前
学习笔记:Vue Router 中的嵌套路由详解[特殊字符]概述
前端·javascript·vue.js
泻水置平地28 分钟前
若依前后端分离版实现前端国际化步骤
前端
Villiam_AY30 分钟前
从后端到react框架
前端·react.js·前端框架
CodeCraft Studio32 分钟前
全球知名的Java Web开发平台Vaadin上线慧都网
java·开发语言·前端·vaadin·java开发框架·java全栈开发·java ui 框架
一只小风华~40 分钟前
Vue Router 命名路由学习笔记
前端·javascript·vue.js·笔记·学习·ecmascript
我是华为OD~HR~栗栗呀43 分钟前
前端面经-高级开发(华为od)
java·前端·后端·python·华为od·华为·面试