Angular Flexbox: how to set max width of a div

Question

I'm using Angular Flexlayout (based on FlexBox) to add responsiveness to my application.

Is it possible to set a max-width to a HTML element?

Example:

<div fxFlex.gt-md="70" fxLayout.lt-lg="100"> 
<!-- I want this div to have a maximum width of 1750px. 
Setting max-width has no effect. How can I achieve this? -->
</div>

Solution 1

The solution is to use the "shrink" and "grow" value of the FxFlex tag. Grow: How to grow the element Shrink: How to shrink the element Initial: Initial value

Examples:

fxFlex="grow shrink initial"
fxFlex="0 1 70" <- Will not grow, will shrink 1:1, initial value of 70%
fxFlex="0 1 1750px" <- Will not grow, will shrink 1:1, initial value of 1750px

Documentation here

Solution 2

To be honest, I think the simplest solution is adding a CSS class :

<div class="content" fxLayout="row" fxFlexFill>
  <div fxFlex="15" class="max-width">
    first-section
  </div>
  <div fxFlex="30" class="sec2">
    second-section
  </div>
  <div fxFlex="55" class="sec3">
    third-section
  </div>
</div>

With the following CSS class:

.max-width{
    background-color: red;
    max-width: 1750px;
}
.sec2{
    background-color: blue;
}
.sec3{
    background-color: yellow;
}

Comments

[Vingtoft]

As pointed out in the question: setting 'max-width' has no effect. Not even with !important tag

[Sachila Ranawaka]

did u use the !important

[Chris]

They just claimed it does not work even with !important

[Reza Taba]

Beautiful solution. Thanks!