CODEWITHSUNDEEP
flexboxangular-material
Mankind1023
Mankind1023

Reputation: 7732

Angular Material Flex Layout - fit div width to content

I've been looking around and found many answers, but none seem to quite fit what I need, I have several divs in a row, and I would like the ones on the left to fit their content only, here is the current example:

<div fxLayout="row wrap" style="border: 1px solid red">
  <div fxFlex style="background-color: yellow">
    foo
  </div>

  <div fxFlex  style="background-color:aquamarine">
    bar
  </div>

  <div fxFlex fxLayoutAlign="end end">
      some content that might expand to a max-width somehow
  </div>
</div>

here is the result: enter image description here

I would like to achieve something similar to the image below, by specifying a max-width for the first 2 divs if there is enough content, but if there isn't a lot of content, then to only use the width needed, like so: enter image description here

Upvotes: 0

Views: 3310

Answers (2)

tayyab_fareed
tayyab_fareed

Reputation: 679

Try using fxFlex="none"

<div fxLayout="row wrap" style="border: 1px solid red">
    <div fxFlex="none" style="background-color: yellow">
     foo
    </div>

    <div fxFlex="none"  style="background-color:aquamarine">
     bar
    </div>

    <div fxFlex fxLayoutAlign="end end">
     some content that might expand to a max-width somehow
    </div>
</div>

Upvotes: 1

sergiomse
sergiomse

Reputation: 785

You can try this:

  <div fxLayout="row wrap" style="border: 1px solid red">
    <div fxFlex="0 0" style="max-width: 40px; background-color: yellow">
      foo
    </div>

    <div fxFlex="0 0" style="max-width: 40px; background-color:aquamarine">
      bar
    </div>

    <div fxFlex fxLayoutAlign="end end">
      some content that might expand to a max-width somehow
    </div>
  </div>

https://stackblitz.com/edit/angular-ivy-9ywiaq?file=src%2Fapp%2Fapp.component.html

To make them not grown or shrink you can use this:

fxFlex="0 0"

https://github.com/angular/flex-layout/wiki/Declarative-API-Overview

And for the max width you can use the same css property:

max-width: 40px;

Upvotes: 0

Related Questions