# Boxes That Fill Height, full Height(Or More) (and Don’t Squish) (ok) ### Ví dụ 1:
```html Document

Boxes That Fill Height (or more)

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Two

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.

Three

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.

Four

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.

Five

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.

``` It’s hard to sum up all the awesome that is flexbox in a little ol’ blog post. Although we [gave it a shot here](https://css-tricks.com/snippets/css/a-guide-to-flexbox/). Here, let’s just try and focus on one thing that flexbox solves very nicely: the ability to have an arbitrary set of boxes fill up all the available height of a parent box. And not only that, but expand beyond that if needed (not squish them to fit). By “box”, I just mean block level element. Div, section, article, whatever. By default those boxes height is determined by the content inside them. They will stack on top of each other. Their parent boxes height might also be determined by their height combined, but it could be different (e.g. it’s set explicitly or it’s something variable like the browser window). If the parent box has a larger height, there will just be empty space below. Can’t we force the boxes to split up the space evenly amongst that space? We can with flexbox.

Left: default; Right: what we wanna do

Say the HTML is like: ```html
``` Then we kick off flexbox with the parent box: ```css .fill-height-or-more { display: flex; } ``` and make the boxes up-and-down (column) rather than left-and-right (row) as is the default: ```css .fill-height-or-more { display: flex; flex-direction: column; } ``` With just that, it will look no different than it did if we did nothing. But now we apply the flex property to the children and they will fill the space: ```css .fill-height-or-more > div { /* these are the flex items */ flex: 1; } ``` Annnnd done =). As a detail here, `flex: 1;` is the same as saying `flex: 1 1 auto;` It is shorthand for three different properties: ```css flex-grow: 1; flex-shrink: 1; flex-basis: auto; ``` Just so happens that giving them the ability to grow on an equal basis the most common need so `flex: 1;` is a nice way to write that. One of the nice things about flexbox is this will work with an arbitrary number of boxes. Could be a single box! Could be 100 boxes! Doesn’t matter. If there is extra room, the space will be divided and filled. If not, no big deal. In a pre-flexbox world, we might have tried to know/find out how many boxes there were, and then set their heights with percentages. That works to fill extra space, but if there were too many boxes, you’d get squished. That’s another nice thing about flexbox, it won’t squish those boxes to the point of them not being able to fit their content. So…

Left: if we were to use percentages; Right: Normal desired behavior

If we wanted to take this a step further, we could use flexbox to center the content within those boxes too (!). This is where people get mad at CSS though. Vertical centering is kinda hard. Even with flexbox here, we’ll need to make each of those flex item children we have into flex containers as well. ~~Then use an internal wrapper which becomes the flex item we center. So yeah, an extra element still.~~ Update: Tedmotu [did it](https://css-tricks.com/boxes-fill-height-dont-squish/#comment-1129898) without the extra element, which is really straightforward To center it, we make the direction up-and-down again (column) and use another flexbox property, `justify-content`, to center it. ```css .fill-height-or-more > div { flex: 1; display: flex; justify-content: center; flex-direction: column; } ``` This is where [the reference guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) comes in handy… finding out which property does what quickly. Then we get this:
#### Browser Support I’ve only used the latest syntax here in this post. Current versions of Chrome, Opera support it just like that. Near-future versions of Firefox and Android will be supporting it just like that as well. Safari and iOS support the new syntax, just with -webkit- prefixes. [Can I Use](http://caniuse.com/flexbox) has the whole story. IE is weird. IE 10 supports the tweener version of flexbox (e.g. [display: -ms-flexbox;](https://css-tricks.com/old-flexbox-and-new-flexbox/)). IE 11 supports the latest flexbox. **With this particular demo though,** something is broken. While the height of .fill-height-or-more renders at full height by using `min-height`, the boxes are squished.
If you use height instead of the flex container, it “works” – but the point here was using min-height to avoid squishing. Seems like an implementation bug to me. **UPDATE:** Nirav Zaveri wrote to tell me that in IE (I tested v11), `flex: 1` isn’t the same as `flex: 1 1 auto`, even though it should be (?). If you set the later, [it works](https://css-tricks.com/wp-content/uploads/2014/01/flexauto.gif). It’s understandable that you might need to go back a bit further with browser support. Firefox 27, iOS 6, and Safari 6 are pretty legit browser support targets and all those use some variation of the older syntax, sometimes prefixed and sometimes not. Just our little example looks like this when as fleshed out as it can be for support: ```css .fill-height-or-more { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .fill-height-or-more > div { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } ``` Yeesh. My recommendation? Write it in the modern syntax like I have above and let [Autoprefixer](https://css-tricks.com/autoprefixer/) deal with it, which not only deals with the prefixing but the older syntax as well. #### Video Screencast Might as well hey? [I published it here](https://css-tricks.com/video-screencasts/131-tinkering-flexbox/) and I’ll embed it also: *** Oh and just for the record, the real-world scenario that brought this on for me was [this page](http://codepen.io/stats/). [![Digital Ocean - Simpler Cloud. Happier Devs. Better Results. Try for free](https://css-tricks.com/wp-content/uploads/2022/10/SimplerCloudHappierDevsRight.jpg)](https://try.digitalocean.com/css-tricks/?utm_medium=content_acq\&utm_source=css-tricks\&utm_campaign=global_brand_ad_en\&utm_content=conversion_rightpane_simplercloudhappierdevs)[See the difference yourself with a $200 free credit to try out DigitalOcean!](https://try.digitalocean.com/css-tricks/?utm_medium=content_acq\&utm_source=css-tricks\&utm_campaign=global_brand_ad_en\&utm_content=conversion_rightpane_simplercloudhappierdevs)[![Ad for Slack](https://cdn4.buysellads.net/uu/7/131163/1678214169-slack-600x600-white.png)](https://srv.buysellads.com/ads/click/x/GTND42JYCTYD453MCEBLYKQNFTYDT53WFT7IEZ3JCYADT2QMC67I5K7KC6SDT2JUCABI453ICWADTK3JCAAI55QIHEYIK53ECTBI42JECTNCYBZ52K)SPONSORED[Automate manual tasks, improve communication & easily find the info you need in Slack.](https://srv.buysellads.com/ads/click/x/GTND42JYCTYD453MCEBLYKQNFTYDT53WFT7IEZ3JCYADT2QMC67I5K7KC6SDT2JUCABI453ICWADTK3JCAAI55QIHEYIK53ECTBI42JECTNCYBZ52K)[![Ad for Shutterstock FLEX](https://cdn4.buysellads.net/uu/7/127310/1673883810-2023-01-16_flex25_en_image_600x600.png)](https://srv.buysellads.com/ads/click/x/GTND42JYCTYD453MCEBLYKQNFTYD4K7YCKBDPZ3JCYADT2QWCK7D553KC6SDT2JUCABI453ICWADTK3JCAAI55QIHEYIK53ECTBI42JECTNCYBZ52K)SPONSORED[Get the images, video, music, and creative tools in one easy-to-manage plan with Shutterstock FLEX.](https://srv.buysellads.com/ads/click/x/GTND42JYCTYD453MCEBLYKQNFTYD4K7YCKBDPZ3JCYADT2QWCK7D553KC6SDT2JUCABI453ICWADTK3JCAAI55QIHEYIK53ECTBI42JECTNCYBZ52K)[![Ad for Mailchimp](https://cdn4.buysellads.net/uu/7/122503/1665523587-MC_CSSTricks_Logo_600x600-_1_.png)](https://srv.buysellads.com/ads/click/x/GTND42JYCTYD453MCEBLYKQNFTYD4K7YCASI4Z3JCYADT2QWCYYIVKQKC6SDT2JUCABI453ICWADTK3JCAAI55QIHEYIK53ECTBI42JECTNCYBZ52K)SPONSORED[Guess less and sell more with the #1 email marketing and automation brand. Sign up today.](https://srv.buysellads.com/ads/click/x/GTND42JYCTYD453MCEBLYKQNFTYD4K7YCASI4Z3JCYADT2QWCYYIVKQKC6SDT2JUCABI453ICWADTK3JCAAI55QIHEYIK53ECTBI42JECTNCYBZ52K)![](https://ad.doubleclick.net/ddm/trackimp/N1224323.3091281BUYSELLADS/B29258209.358323080;dc_trk_aid=549482214;dc_trk_cid=186409416;ord=\[timestamp];dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;ltd=?)![](https://pixel.adsafeprotected.com/rfw/st/1337634/69219010/skeleton.gif?gdpr=$\&gdpr_consent=$\&gdpr_pd=$\&network=BUYSELLADS)![](https://track.activemetering.com/pixel/v1/all/pixel.gif?cid=21c16ee3-ddd5-4d52-9068-eae1e2a145db\&creativeId=186409416\&placementId=358323080\&network=BUYSELLADS)[![ads via Carbon](https://cdn4.buysellads.net/uu/1/127419/1670532177-Stock.jpg)](https://srv.carbonads.net/ads/click/x/GTND42JYCTYD52J7F6BLYKQNFTYD4K7YCVAIKZ3JCYADT2QWCVADC23KC6SDT2JUCABI453ICWADTK3JCAAIEKQEHEYIK53ECTBI42JECTNCYBZ52K?segment=placement:csstrickscom;)[Get 10 Free Images From Adobe Stock. Start Now.](https://srv.carbonads.net/ads/click/x/GTND42JYCTYD52J7F6BLYKQNFTYD4K7YCVAIKZ3JCYADT2QWCVADC23KC6SDT2JUCABI453ICWADTK3JCAAIEKQEHEYIK53ECTBI42JECTNCYBZ52K?segment=placement:csstrickscom;)[ads via Carbon](http://carbonads.net/?utm_source=csstrickscom\&utm_medium=ad_via_link\&utm_campaign=in_unit\&utm_term=carbon)*Psst!* Create a DigitalOcean account and get [$200 in free credit](https://try.digitalocean.com/css-tricks/?utm_medium=content_acq\&utm_source=css-tricks\&utm_campaign=global_brand_ad_en\&utm_content=conversion_postarticle_psst) for cloud-based hosting and services. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://learncss.gitbook.io/cssadvand/boxes-that-fill-height-full-height-or-more-and-dont-squish-ok.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.