小编Fed*_*Fed的帖子

使用 flex display 时避免挤压元素

我想在使用以下 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;
}

Run Code Online (Sandbox Code Playgroud)

<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 …

Run Code Online (Sandbox Code Playgroud)

html javascript css flexbox

Fed*_*Fed

2016 12-09

1
推荐指数

1
解决办法

3421
查看次数