1

Setting px value in fxFlex (of @angular/flex-layout) does not seem to behave as expected.

I have two plunkrs examplifying this.

<div fxLayout="row" >
   <div fxFlex="0 1 2000px" >  
       <p>... Really Really long Lorem Ipsum ...</p>
       <!-- expecting flex div to shrink to viewport size, 
            with no horizontal scrolling necessary-->

<div fxLayout="column" >
   <div fxFlex="1 0 200px" >  
       <p>... Really Really long Lorem Ipsum ...</p>
       <!-- expecting flex div to grow to accommodate, 
            content size with vertical scrolling if necessary-->

In each case, as you can see when you run the plunkers, the expectation was not met.

It doesn't seem like this is behaving as in css flex spec

How can I get this to work?

Vega
  • 27,856
  • 27
  • 95
  • 103
Somo S.
  • 3,997
  • 4
  • 26
  • 33
  • First plunker: add `min-width: 0` to flex item. Second plunker: add `overflow: auto` to flex item. – Michael Benjamin Jan 28 '17 at 11:29
  • possible duplicate: http://stackoverflow.com/q/36247140/3597276 – Michael Benjamin Jan 28 '17 at 11:30
  • @Michael_B To be clear, an answer to my question (is angular 2 code that), in the case of the Row example, will make the cyan box look identical to the yellow one .. and in the case of the Column example, an answer will make the blue box look identical the green box (that you get when you click).. However, your suggestions do not achieve this. – Somo S. Jan 28 '17 at 14:01
  • Secondly, if your answer did achieve this, why isn't the flexlayout library automatically generating the extra css. I have shown barebones css to be able to produce expected ... albeit, without the need for min/max width/height or overflows. So why is flexlayout API unable to achieve this basic requirement of the (2016) css flex spec. Or perhaps it can achieve this? Kindly demonstrate clearly how (feel free to fork my plunkrs) ... – Somo S. Jan 28 '17 at 14:16
  • Finally, as you can see by now, this is a question about Angular 2 flexlayout library, not about barebones css3 flexbox which. I have already demonstrated in the plunker that i know how to use barebones css3 to achieve the expected flex layout.. so this question is not a duplicate about that that kind of thing – Somo S. Jan 28 '17 at 14:18
  • Yes, that's why I wrote *possible* duplicate... My experience with Angular code is limited. Others with more knowledge about the framework should be able to help you. Good luck. – Michael Benjamin Jan 28 '17 at 14:19
  • @Somo did you ever resolve this? Did you file a bug report? I'm trying to set a flex-basis of 0 to make rows with equal width columns and `fxFlex=1 0 0` is setting `max-width=0px` on my element... – adamdport May 06 '17 at 20:10
  • @adamdport Yes I did in fact I fixed it myself and filed a pull request that was accepted.. They are still some other issues with the lib though .. So it's possible that this is a related issue.. However, have you tried setting flex-basis to auto? (`fxFlex="1 0 auto"`) – Somo S. May 06 '17 at 20:38
  • No, I don't want the contents to influence the element's size. `flex-basis: 0;` is what I want, but without additional min and max width properties. I'll file another issue. Thanks for the quick response. – adamdport May 06 '17 at 21:29
  • Oh.. to fix container so that it neither grows nor shrinks with content, I believe what you want is `fxFlex="0 0 auto"` (same as `fxFlex="none"`) if that doesn't work file and be sure to include a plunker reproducing the issue. You're welcome! – Somo S. May 06 '17 at 21:35
  • Nope, I want it to grow and shrink *independent* of contents. I created this issue: https://github.com/angular/flex-layout/issues/277. Thanks for trying! – adamdport May 06 '17 at 22:06

0 Answers0