flex 子元素的宽度问题

Question

flex 子元素的宽度好像会被 PRE 元素撑开。

例如： codepen，如何让c2的宽度不被撑开？

Answer 1

增加下面这个就好了

  white-space: pre-wrap;
  word-wrap: break-word;
  word-break:break-all;

Answer 2

.c2 {overflow: hidden}

Answer 3

想要不被撑开，那就要限制.main一个width/height
.c2-child 设置其不能滚动，设置width/height

.main{
  display:flex;
  flex-wrap: nowrap;
  width: 100px;
  height: 200px;
}

.c1{
  flex:0 0;
  background-color:yellow;
}

.c2{
  flex:1 1;
  background-color:red;
}

.c2-child{

  background-color:green;
  width: 100%;
  height: 100%;
  overflow: hidden;
  
}

Answer 4

设置子元素的width和height,