css俩段线段上坡；父元素设置了display:flex之后子元素超出父元素宽度被压缩现象解决

原创于 2023-08-18 15:44:51 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #javascript

css 专栏收录该内容

19 篇文章

订阅专栏

博客主要讲述了在前端开发中，当父元素设置display:flex后，子元素超出父元素宽度会被压缩的问题及解决办法，即给子元素设置使其按实际宽度展示，不采用弹性布局。

    .line {
      width: 200px;
      background: #1677ee;
      position: relative;
      margin-bottom: 34px;
      transform-origin: top left;
      height: 4px;
      border-radius: 2px;
      flex-shrink: 0;
      
    }

    .endStaion {
      width: 200px;
      background: #1677ee;
      transform-origin: top left;
      height: 4px;
      border-radius: 2px;
      flex-shrink: 0;
      transform: rotate(-30deg);
      position: relative;
      top: -16px;
      left: -3px
    }