我需要制作一个响应式网页,使父元素的宽度是动态的。有两个弹性项目,一个是长的(动态的),另一个是短的(静态的)。
我希望结果看起来像第二行,长文本被打断(或重叠时隐藏),而短文本始终正确显示。
我尝试使用flex-shrink: 0,但似乎总会出现溢出。
在这种情况下,如何消除溢出?
我确实需要弹性布局,并且不应涉及js。
我希望结果看起来像第二行,长文本被打断(或重叠时隐藏),而短文本始终正确显示。
我尝试使用flex-shrink: 0,但似乎总会出现溢出。
在这种情况下,如何消除溢出?
我确实需要弹性布局,并且不应涉及js。
.parent {
display: flex;
flex-direction: row;
width: 15rem;
background: yellowgreen;
padding: 10px;
overflow: hidden;
}
.flex-item {
width: 10em;
padding: 10px;
background: yellow;
flex: 1 1 50%;
}
.block1 {
background: red;
}
.block2 {
background: orange;
}
.nos {
flex-shrink: 0 !important;
}
<div class="parent">
<div class="flex-item">
<div class="block1">
longlonglonglonglonglonglonglonglonglonglonglonglonglong
</div>
</div>
<div class="flex-item nos">
<div class="block2">
Display
</div>
</div>
</div>
<br/>
<div class="parent">
<div class="flex-item">
<div class="block1">
longlonglonglonglong...
</div>
</div>
<div class="flex-item">
<div class="block2">
Display
</div>
</div>
</div>
<br>
来换行呢? - Penguin9