CODEWITHSUNDEEP
cssflexbox
Fredrik
Fredrik

Reputation: 5108

Should large flexbox flex-values be avoided?

So I have a block with 2 blocks in, where block1 takes up 90% of the space and block2 takes up 10% of the space, approximately. This works fine in most browsers, however in IE 11 block1 takes up too much space (~97%) which hides most of block2. This is, as seen in the code below, with flex: 1 and flex: 0. If I, however, change the values to flex: 10 and flex: 0 for the blocks it works fine in all browsers.

.block1 {
    flex: 1;  // --> 9
}

.block2 {
    flex: 0;  // --> 1
}

So to my question; is there any reason I should avoid this approach? If so, what would be a better solution?

For some context to what we're dealing with; it's a horizontally streching notification bar with a main text message and close-button.

Horrible reconstruction:

                                   Centered text                                    [Close]

Upvotes: 0

Views: 52

Answers (2)

Danield
Danield

Reputation: 125581

Allocate 10% to block2 with flex: 0 0 10% and then allocate the rest of the space to block 1 with flex: 1

Demo

.wpr {
  display: flex;
  height: 100px;
}
.block1 {
  flex: 1;
  background: aqua;
}
.block2 {
  flex: 0 0 10%;
  background: tomato;
}
<div class="wpr">
  <div class="block1">block 1</div>
  <div class="block2">block 2</div>
</div>

Upvotes: 1

Tanasos
Tanasos

Reputation: 4098

Why not simply use display: flex with simple 10 to 90% ratio sharings?

PRO TIP: When using flex-grow , you should include another content wrapper within the flexed element (if it is supposed to be with a fixed width) to avoid content-squeeze.

That might be a browser-specific prefix issue. I suggest using an Auto-Prefixer plugin with Your editor of choice. Bad thing is, prefixes for Flex-box are way too many for one to handle evenly cross-browser-wise. So if You are using SASS, I will advise You to use a mixin Library like Bourbon.io which produces all the prefix weight for You.

If You do not, then I suggest you start learning the prefix mess that Flexbox comes with.

Upvotes: 1

Related Questions