我有一个Flex Box容器,其中包含3个动态内容的子元素。
如果孩子的内容之一超出了元素的大小,它会分成几行。
我想防止孩子的换行,但是,如果容器超出了限制,它将分成不同的行。
我在子级上尝试了flex-shrink:0,现在子级内容在一行中,但是如果总内容超出,则无法将容器分成不同的行。
我如何强迫孩子显示一个衬纸内容,并确保父容器充当断字功能:all-all
这是我的代码:
.activity-row {
display: flex;
flex-direction: row;
box-sizing: border-box;
place-content: center flex-start;
align-items: center;
line-height: 1.5rem;
word-break: break-all;
}
.activity-cell {
flex-shrink: 0;
}
<div class="activity-row">
<div class="activity-cell">some data</div>
<div class="activity-cell">some data</div>
<div class="activity-cell">some data</div>
</div>