我想在使用下面的 CSS 代码时避免挤压元素,尤其是 Chrome 浏览器,ver. 39.
此 CSS 代码在 Chrome 版本上运行良好。 46. 但我需要使用像谷歌浏览器 v.39 这样的旧版本。因为我使用此版本作为包装器来创建桌面 PC 应用程序。
这是我想避免的挤压效果:
这里看起来不错:
#bascket {
overflow: hidden;
position: absolute;
width: 100%;
height: 52.9%;
top: 14.72%;
left: 0px;
background: rgb(255, 255, 255);
outline: none;
cursor: -webkit-grab;
display: flex;
flex-direction: column-reverse;
flex-grow: 1;
flex-shrink: 1;
justify-content: flex-start;
}
<div id="bascket">
<div class="order-item">
<div class="oi-p1">1</div>
<div class="oi-p2">Item Name 1</div>
<div class="oi-p3"></div>
<div class="oi-p4">77</div>
</div>
<div class="order-item">
<div class="oi-p1">1</div>
<div class="oi-p2">Item Name 2</div>
<div class="oi-p3"></div>
<div class="oi-p4">77</div>
</div>
<div class="vertical-line-1"></div>
<div class="vertical-line-2"></div>
</div>
这是一个封装到桌面应用程序中的网络应用程序。我在这里所做的只是将元素添加到篮子区域。我使用此 javascript 代码添加元素:
var bascket = document.getElementById("bascket");
var item = document.createElement("DIV");
item.innerHTML = "...see the above full html code sample"
bascket.insertBefore(item, bascket.firstChild);
如果我这样做:
document.getElementById('bascket').style.height = '100%';
那就更好了,但是这改变了元素显示,我失去了显示最后一个元素的底部,看这张图:
我想我应该玩高度拉伸(stretch)和合身,但我找不到怎么做
最佳答案
flex-shrink
和 flex-grow
属性仅适用于 flex 元素。你把它们放在 flex 容器上。
无论如何,默认设置都是 flex-shrink: 1
,因此您的 flex 元素(#bascket
的子项)具有此设置并允许收缩。
您可以使用 flex-shrink: 0
flex 元素 来禁用收缩。
更多细节在这里:
关于javascript - 使用 flex display 时避免挤压元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41045267/