文本未在Chrome的flexbox网格中换行
旅团
CodePen：http ://codepen.io/anon/pen/dYKGwV?editors=110
我有这个HTML：
<div class="Box Box--row" style="width: 20em; border: 1px solid black">
<div class="Box Box--column">Avatar</div>
<div class="Box Box--column">
<div class="Box Box--row">
<div class="Box">Name</div>
<div class="Box">6:30pm</div>
</div>
<div style="max-width: 100%; width: 100%;">
This is some text. This is some text. This is some text. This is some text. This is some text.
</div>
</div>
</div>
和CSS：
.Box {
box-sizing: border-box;
position: relative;
border: 0 solid black;
margin: 0;
padding: 0;
align-items: stretch;
justify-content: flex-start;
flex-shrink: 0;
display: flex;
&--row { flex-direction: row; }
&--column { flex-direction: column; }
}
但它的呈现方式是这样的：
它有点在Firefox中工作。如何获取要包装的文字？
马克西米利安·科勒（Maximilian Koehler）
为什么将flex-shrink设置为0？当我将其设置为1时，它可以正常工作。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
文本未在IE EDGE中的flexbox中换行
- 2
标签文本未在Bootstrap网格设置中自动换行
- 3
每个单元格中的 UI 网格换行文本
- 4
CSS Flexbox - CSS 网格中的截断文本（仅限 Firefox）
- 5
列flexbox中的换行
- 6
在Vaadin 14中，列标题中的文本可以换行到网格中的多行吗？
- 7
在文本输入中换行
- 8
将列表更改为网格后，图像未在Chrome中显示
- 9
CSS Flexbox 帮助，让项目在网格中对齐（图像、标题、文本）
- 10
在 IE11 中，flexbox div 不尊重容器，文本在一行中溢出，而不是换行
- 11
防止在flexbox子元素中换行
- 12
内联级元素被强制在flexbox中换行
- 13
如果Chrome中的宽度较小，则<SELECT>会将文本换行到下一行
- 14
如果Chrome中的宽度较小，则<SELECT>会将文本换行到下一行
- 15
未在Baseadapter中设置文本
- 16
滚动时文本溢出省略号未在Chrome和IE中显示溢出内容
- 17
按钮未在Chrome中定位
- 18
在CSS flexbox网格中拉伸元素
- 19
Flexbox中的文本顶部对齐
- 20
flexbox 布局中的垂直文本
- 21
文本在 flexbox 中右对齐
- 22
CSS Flexbox（或网格）：2列，行换行，没有增长，内部页边距
- 23
在C＃，Gridview，Winforms中的数据网格中交换行
- 24
文字未在手机上的div中换行
- 25
文字未在Flex IE10中换行
- 26
换行，div纯文本中的br
- 27
如何在跨度文本中换行？
- 28
计算文本框中的换行
- 29
div中的文本换行-内部示例
我来说两句