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
John Rothra
6,711 PointsFlexbox: Constrain flex child content to the size of the flex child container
This will be a longer post with links to examples, but I want to be as specific as possible and provide as much info as I can.
I'm using Workspaces to design my new site and I'm trying to use flexboxes. However, in one section, the content of a flex child seems to ignore the flex child container and set its own size, especially images.
There are three key parts to this section:
- Blurb
- Book cover
- 1X Method (with text and SVGs)
What I want is for these three subsections to be aligned as a column on smaller screens. For medium and larger screens I want the blurb on top full width with the book title and 1X Method side-by-side, each section taking up about 50% of the width.
However, no matter what CSS I try, the book cover image's size seems to ignore it's flex child container and, instead, determines its size based on the screen. I tested this using text (which, in theory, would word wrap) but found that longer text also makes that flex child too wide.
Here are screen shots (screen width 640x960 using the Resize Window extension for Chrome):
- Image - https://goo.gl/sdyRuV
- Long text - https://goo.gl/18rpYa
- Short text - https://goo.gl/LlRVS4
Here's the full code of that page:
Please help.
13 Answers
Glenré Charl Labuschagné
23,204 PointsO, okay,
You mean something like this?
@media all and (min-width: 600px) {
.fp-1x-cover,
.fp-1x-method {
flex-basis: 45%;
margin: 25px 0;
}
}
Glenré Charl Labuschagné
23,204 PointsHi John,
Do you perhaps have a link to review please?
John Rothra
6,711 Pointscharl heistein - No, because like I said, I'm using Workspaces to design it. so it's not a live site, only saved in my WS.
That's why I provided screen shots and the full code via PasteBin.
Glenré Charl Labuschagné
23,204 PointsHi John,
I understand—your challenge is image based, and your code didn't include the images.
John Rothra
6,711 PointsThe book cover actual size is 1575x2175.
John Rothra
6,711 PointsNevermind my above reply... after some sleep I realized what you meant: I didn't tell the site what to do with the image in the CSS code.
Note to self: coding at 3:30 AM isn't wise
Glenré Charl Labuschagné
23,204 PointsAll good John, glad you got sorted and some well deserved sleep.
John Rothra
6,711 PointsOkay, I altered the code regarding the media query for screens 600px and larger. However, the image still is full size.
Altered code:
/* Medium screens */
@media all and (min-width: 600px) {
/* We tell both sidebars to share a row */
.fp-1x-cover,
.fp-1x-cover img,
.fp-1x-method {
flex: 1 auto;
}
}
I've also tried, img.fp-1x-cover and it didn't work either. Oddly, this exact coding worked fine for CSS Tricks, but theirs was text only.
I can try telling the site to adjust the image itself using percentages or absolute pixels, but that seems counter to the flexbox concept.
Glenré Charl Labuschagné
23,204 PointsHi John,
try adding the following code and see if it works for you:
.fp-1x-cover img {
height: auto;
display: block;
max-width: 100%;
}
Glenré Charl Labuschagné
23,204 PointsNote the above is from Bootstrap's class used to create responsive images .img-responsive and isn't placed within a media query.
John Rothra
6,711 PointsThat worked for when the three sections are a column, but the flexbox is eliminated this way. What happens the cover never moves next to the 1X Method.
Try this URL and see if you can see it (I could using Incognito Mode): http://port-80-ml6kbe826t.treehouse-app.com/
John Rothra
6,711 PointsWhat I'm wanting is this arrangement (but the book cover instead of "IMAGE"): https://goo.gl/LlRVS4
I may just have to use media queries and percentages, which defeats the purpose of the flexbox.
John Rothra
6,711 PointsThat's it! Thank you, thank you, thank you! I wasn't really familiar with the flex basis declaration. I knew what the definition was, but wasn't sure how it worked.
From this I can work with fine tuning it.
Glenré Charl Labuschagné
23,204 PointsHey, that's wonderful John. Glad I could assist. A definite must have bookmark for flexbox is this awesome link by CSS Tricks
John Rothra
6,711 PointsI've been using that resource a lot, though I must admit, it's not always clear, especially regarding flex grow and flex shrink.