Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Marc Aldrin Dela Cruz
Marc Aldrin Dela Cruz
2,896 Points
Posted by Marc Aldrin Dela Cruz
Marc Aldrin Dela Cruz
2,896 Points

How to Set A fix height or width to a certain element in a flexbox?

Let's say i have a flexbox container with the height of 300px; and there is two flexbox items inside. I want the item 1 to be 250px tall! and the other is 50px tall only?

and i want a specific ammount of space between the two..

is that possible with flexbox?

1 Answer

trio-group I.AM
trio-group I.AM
25,712 Points

Hey Marc!

Have you tried achieving this with flex-basis? Here's an example of a very basic flex-box layout:

.container {
height: 300px;
width: 700px;
display: flex;
flex-flow: column nowrap;
}

.item1 {
flex: 1 1 250px;
background-color: #78de53;
}

.item2 {
  flex: 1 1 50px;
  background-color: #5d89cc;
}

The flex property is a shorthand for flex-grow, flex-shrink and flex-basis (in this order). flex-basis sets the initial size of flex items so it might help doing some research on it and playing with different values in the browser.

Obviously, setting fixed widths/heights in pixel values is not the best idea when you're making a responsive website, so try using percentage values or vw/vh.

Hope this helps!