Avoid squeezing of elements when using flex display

Question

I want to avoid squeezing of elements when using the below CSS code, especially for Chrome browser, ver. 39.

This CSS code works well on Chrome ver. 46. But I need to use old version like v.39 of Google Chrome. Because I use this version as a wrapper to create a desktop PC application.

Here is the squeezing effect which I want to avoid:

Here it looks fine:

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

This is a web app wrapped into a desktop application. And what i do here is just adding items to bascket area. I use this javascript code to add items:

var bascket = document.getElementById("bascket");
var item = document.createElement("DIV");
item.innerHTML = "...see the above full html code sample"
bascket.insertBefore(item, bascket.firstChild);

If I do this:

document.getElementById('bascket').style.height = '100%';

Then it is better, but this changes item display, and I lose the bottom which shows the last item , see this image:

I think I should play with height stretch and fit, but I cannot find how to do that

I have tried to make the parent element to have auto size, using this: height:auto; this will display the elements from bascket better, but then other problem will occur, and bascket will extend its content on other elements, and this mess the screen again :( — , Dec 08 '16 at 17:35

score 25 · Accepted Answer · edited May 23 '17 at 12:01

25

The flex-shrink and flex-grow properties apply only to flex items. You have them on the flex container.

The default setting is flex-shrink: 1 regardless, so your flex items (the children of #bascket) have this setting and are allowed to shrink.

You can disable shrinking with flex-shrink: 0 on the flex items.

More details here:

What are the differences between flex-basis and width?

edited May 23 '17 at 12:01

Community

1
1

answered Dec 08 '16 at 17:28

Michael Benjamin

346,931
104
581
701

1

@Fed I think he means putting `flex-shrink: 0` on the children of `#basket`. Basket is the flex container, and as your code is now, flex-shrink/grow isn't doing anything. – chazsolo Dec 08 '16 at 17:34
1

@chazsolo Yes, you are right, I should put it on each children of #bascket... my mistake, that previously i tried to put on parent node #bascket and childrens of each item of #bascket, so it should be on childrens of #bascket, not children of children :) – Dec 08 '16 at 18:09

Avoid squeezing of elements when using flex display

1 Answers1