使用flex显示时避免压缩元素

Question

在使用下面的CSS代码时，我想避免压缩元素，特别是对于Chrome浏览器。39。

这个CSS代码在Chrome上运行得很好。46.但我需要使用老版本，比如Google的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>

​

这是一个包装在桌面应用程序中的web应用程序。我在这里所做的就是把物品添加到篮球区。我使用这个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%'；

这样就更好了，但是这改变了项目的显示，我失去了显示最后一项的底部，请看下面的图像：

​

​

我想我应该打高伸展和健康，但我找不到如何做到这一点。

Answer 1

flex-shrink和flex-grow属性仅适用于flex项。你把它们放在弹性容器上了。

默认设置是flex-shrink: 1，因此您的flex (#bascket的子项)具有此设置，并且允许收缩。

您可以禁用在flex项上使用flex-shrink: 0进行收缩。

这里有更多细节：

• What are the differences between flex-basis and width?