使用柔性显示器时，避免挤压元件

Question

我想避免在使用下面的CSS代码时挤压元素，尤其是对于 Chrome浏览器，版本。 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>

这是一个包含在桌面应用程序中的Web应用程序。我在这里做的只是添加项目到bascket区域。我使用这个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，因此您的弹性项目（#bascket的子级）具有此设置，并且可以缩小。

您可以在弹性项上使用flex-shrink: 0 停用收缩。

此处有更多详情：

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