flex:1由于内部元素被撑开的问题

问题描述

当flex:1的元素当其子元素过长(文本过长)时，会直接撑开父元素

<!---html--->
      <div class="wrapper">
        <div class="left">1</div>
        <div class="middle">
          <div>
            3asdasdaadasdasdadadasdasd3asdasdaadasdasdadadasdasd3asdasdaadasdasdadadasdasd3asdasdaadasdasdadadasdasd3asdasdaadasdasdadadasdasd3asdasdaadasdasdadadasdasd3asdasdaadasdasdadadasdasd
          </div>
        </div>
        <div class="right">2</div>
      </div>

/*css文件*/
* {
  color: white;
}

.wrapper {
  display: flex;
}

.left {
  flex: 0 30%;
  background: red;
}

.middle {
  flex: 1;
  background: #f44;
}

.right {
  flex: 0 60px;
  background: blue;
}

• 内部元素内容较小时的布局

• 当内部元素宽度过大时候的问题

右边布局直接被顶出页面

解决办法

在flex:1的元素上添加overflow: hidden即可,

通过设置overflow:hidden即可将其宽度固定为100%宽度中其应该所占的宽度

对文本的操作

• 文本自动换行设置

.middle {
  flex: 1;
  background: #f44;
  overflow:hidden;
  word-wrap:break-word;
  word-break:break-all;
}

实验结果

• 文本不换行添加text-overflow设置

  *Notes:*这里的这里添加text-overflow的元素一定是宽度固定的，不然overflow:hidden会失效，比如div这里宽度block默认为100%,如果这里是span就不会生效

.middle {
  flex: 1;
  background: #f44;
  overflow:hidden;
}

.middle > div {
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

实验结果