CODEWITHSUNDEEP
cssflexbox
Gajus
Gajus

Reputation: 73808

How to make flex-grow act not greedy?

illustration

Markup:

<div class="playground">
  <div class="red">
    <div class="child">I don't need all this space, but my parents are greddy. : (</div>
  </div>
  <div class="blue">I want to grow big!</div>
</div>

Stylesheet:

.playground {
  width: 500px; height: 500px; background: #ccc; display: flex; flex-direction: column;
}

.red,
.blue {
  width: 100%;
}

.red {
  flex: 1; background: rgba(255,0,0,.5);

  .child {
    background: rgba(255,255,255,.5); padding: 10px; margin: 10px;
  }
}

.blue {
  background: rgba(0,0,255,.5); min-height: 100px; max-height: 300px;
}

http://jsbin.com/waset/1/

In the above example,

How to make red not greedy?

Upvotes: 4

Views: 12811

Answers (4)

Ilias Karim
Ilias Karim

Reputation: 5371

I think you can set flex: 1; instead of flex-grow to .red and .blue. This works in Facebook's Yoga Layout.

Upvotes: 0

Ana
Ana

Reputation: 21

Is this what you are looking for? I can't remember where I learned this technique, but I will post credits when I come across the Website again. I created two flexboxes, a blue and red, and each one expands in size when you hover over them. Hope this helps. 

    <!DOCTYPE html>
    <html lang="en">
      <head>

       <style>
       .flx
       {
          width: 400px;
          height: 200px;
          font: 12px auto;

          display: -webkit-flex;
          -webkit-flex-direction: column;
          display: flex;
          flex-direction: column;
       }

       .flx > div
       {
          -webkit-flex: 1 1 auto;
          flex: 1 1 auto;
          width: 50px;

          -webkit-transition: width 0.2s ease-out; /*adjust speed of size change*/
  transition: width 0.2s ease-out;

       }
       .flx > div:nth-child(1){ background : red; }
       .flx > div:nth-child(2){ background : blue; }
       .flx > div:hover    /*adjust size when you hover*/
       {

            width: 200px;
       }
       </style>  

     </head>
     <body>
      <div class="flx">
        <div>red box</div>
        <div>blue box</div>
      </div>
     </body>
    </html>

Upvotes: 0

James Montagne
James Montagne

Reputation: 78650

If I'm understanding you correctly, you can use flex-grow on both .red and .blue and give blue a very large value. Using flex-grow instead of the flex shorthand will default flex-basis to auto. As a result, the flex-basis will be based on the content and then only after the initial content is taken into consideration will leftover space be distributed.

The very large value on .blue will cause it to consume nearly all remaining space up until it reaches its max-width.

.red {
    flex-grow: 1;
    background: rgba(255, 0, 0, .5);

    .child {
        background: rgba(255, 255, 255, .5);
        padding: 10px 10px;
        margin: 10px;
    }
}

.blue {
    flex-grow: 999;
    background: rgba(0, 0, 255, .5);
    min-height: 100px;
    max-height: 300px;
}

Upvotes: 0

chargarg
chargarg

Reputation: 37

Try adding flex:1; to .blue
By the way, you misspelled width in .red,.blue

Upvotes: 1

Related Questions