0

I'd like to create a row with two elements, the right one with a fixed width and the left filling what space remains. This seems just like what flexbox was made for, but I can't really figure out how to do it. I feel like I had it at one point, but can't replicate since. I created plunker with what I'm trying to do:

<div style="display: flex">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in lacus blandit, blandit ante quis, auctor lacus. Maecenas auctor suscipit arcu, vitae sagittis eros varius at. Nulla venenatis faucibus vestibulum. Suspendisse metus velit, ultricies sed molestie quis, congue nec magna. In eget orci et quam aliquam pellentesque. Duis finibus dui mollis odio vehicula tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Sed ornare sagittis pulvinar. Vivamus pulvinar ultricies tristique.
  </div>
  <div style="flex-basis: 150px">Right</div>
</div>

https://plnkr.co/edit/zn1CTY0VWJqtFoR8DxoC?p=preview

I've tried playing around with flex-grow/shrink as well, but can't figure it out. I'm looking to figure this out with flexbox instead of floats.

Rohit
  • 3,018
  • 2
  • 29
  • 58

1 Answers1

3

You should use the shorthand flex: 1 on the first child element instead of flex-grow: 1. This sets the other properties intelligently.

Working version: https://plnkr.co/edit/dT3qxYj7nvYN0xHT4yH8?p=preview

Travis Wagner
  • 339
  • 3
  • 4