为什么弹性项目不能缩小到超过内容大小?

Gil · 03月23日

我有4个flexbox列,并且一切正常,但是当我向列中添加一些文本并将其设置为大字体时,由于flex属性,它使列变宽了。

我尝试使用word-break: break-word它并对其有所帮助,但是当我将列的大小调整为非常小的宽度时,仍然将文本中的字母分成多行(每行一个字母),但是该列的宽度不会小于一个字母的大小。

观看此视频 (开始时,第一列是最小的,但是当我调整窗口大小时,它是最宽的列。我只想始终遵循flex设置; flex大小为1:3:4:4)

我知道,将字体大小和列填充设置为较小会有所帮助……但是还有其他解决方案吗?

我不能使用overflow-x: hidden

JSFiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}
<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

CSSHTML
回答
时间
想发表一点想法咩~

你的回答

加载中...
⌘+Return 发表
发表

温馨提示:登录后可发表评论或回复

关闭,朕知道了

扫码关注微信公众号或小程序