How to set the max-width of a container with flexbox?
I would like to have services-bar__title and services-bar__services to have a max-width of 1024px so that I get the normal flexbox behaviour for the container as formatted below, but the list doesn’t expand further than 1024px if the viewport is wider. I tried setting the container widths and max-widths, but it doesn’t seem to work as expected as the container doesn’t stay centered anymore, any ideas?
.services-bar < display: flex; flex-direction: column; height: 20rem; width: 100%; box-shadow: 0 -3rem 8rem rgba(#000, 0.5); >.services-bar__title < display: flex; flex-direction: row; justify-content: center; >.services-bar__services
Hi. So if I’m understanding your query correctly, you want the services-bar_services_1 up to 4 to be able to expand to a width past 1024px?
Yeah your question isn’t very clear — what you are trying to do and I see no max-widths in your code attempt
4 Answers 4
To do that, you don’t need to make your services-bar a flex , rather only keep services-bar__title and services-bar__services as flex .
Use justify-content: space-around; in the services-bar__services to distribute the items throughout the container. And for the services-bar , set max-width: 1024px; as well as margin: 0 auto; so that it remains in center and don’t go beyond 1024px .
body < margin: 0; >.total-width < width: 100%; height: 40px; background-color: blue; >.width-1024px < max-width: 1024px; margin: 0 auto; height: 40px; background-color: yellow; >.services-bar < height: 20rem; box-shadow: 0 -3rem 8rem rgba(#000, 0.5); max-width: 1024px; margin: 0 auto; >.services-bar__title < display: flex; flex-direction: row; justify-content: center; >.services-bar__services ul
margin: 0 auto, this what was missing here. You got it. Do you know why this is needed since the parent container already has «justify-content: center;», i.e.».services-bar».
If I understood you correctly, you want to expand the service to 100% up to 1024px. Right?
To do so, u need to set the default width to 100%, and set the max-width to 1024px.
.services-bar < display: flex; flex-direction: column; width: 100%; box-shadow: 0 -3rem 8rem rgba(0, 0, 0, 0.5); max-width: 1024px; .services-bar__title < display: flex; flex-direction: row; justify-content: center; >.services-bar__services < display: flex; flex-direction: row; justify-content: center; >.services-bar__services_1, .services-bar__services_2, .services-bar__services_3, .services-bar__services_4 <>If i understood correctly is this what you meant? Then you can use media queries to solve your problem. I set max-width to none on devices larger than 1024px.
.services-bar < display: flex; flex-direction: column; height: 20rem; width: 100%; box-shadow: 0 -3rem 8rem rgba(#000, 0.5); >.services-bar__title < display: flex; flex-direction: row; justify-content: center; background: red; max-width: 1024px; >.services-bar__services < display: flex; flex-direction: row; justify-content: center; background:green; max-width: 1024px; >@media only screen and (min-width : 1024px) < .services-bar__services .services-bar__title >If I understand correctly, you want a container to expand beyond 1024px. I assume the 1024px is the width of a parent element which means you can play with the following code to expand the child element beyond the parent element.
width: 100vw; margin-left: calc(50% - 50vw); This will expand the width to the Viewport Width (100vw — being 100% of the viewport). The problem is that the margin will be set to the parent elements’ margin. To fix this you have to play with the left margin. In order to be responsive you need to use calc.
How do I set a flex-container to be the width of its flex-items?
I have a flex container with justify-content: flex-start . There ends up being overflow on the right side due to the flex items taking less space than the size of the container. Aside from setting an explicit width on the flex-container, is there a way of just having the equivalent of width: auto to remove the overflow?
Flex boxes are pretty damn tricky… and they still have a lot of work to go before they are actually reliable. But this link can help: developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
you are talking of «overflow» and «less space» but you probably mean «underflow» and «less space» or «overflow» and «more space». clarify your question
Any answers for this. I’ve created a fiddle to demonstrate a similiar issue i’m facing: jsfiddle.net/fxz6o726
In the past, I’ve seen this accomplished with flex-basis: auto , but it seems like we’re in a transitional state where Blink is preparing to add flex-basis: content , which should accomplish exactly what you’re asking for.
5 Answers 5
If you mean you want the container to be the width of the items, rather than the items expanding to the container width.
You may be able to get that by changing display:flex to display:inline-flex
inline-flex doesn’t help in my case, and actually, should it? Isn’t that impossible? Like when you set inline-block for container and width: 100% for block items inside, the container won’t resize to its max-width but rather container and items will stay with minimal possible widths. Wouldn’t it work similar for flexbox?
- width: min-content (CSS3 «intrinsic» as opposed to «extrinsic»)
- display: inline-flex if you don’t care whether it’s inline
If you use width: min-content on a paragraph, the longest word determines the width.
.flex-container < display: flex; >.flex-inline-container < display: inline-flex; >.width-min-content < width: min-content; >.row-direction < flex-direction: row; border: 0.0625rem solid #3cf; >.col-direction
flex
flex width: min-content
inline-flex width: min-content shrinks the width by wrapping the content. width: max-content shrinks the width until it would be necessary to wrap the content, and then stops shrinking.
This one worked for me on the same inline-flex (or flex) element:
As suggested by Mahks, you can make the flex container inline. But if laying it inline is not suitable for your layout, an alternative is to float the flex container (not the flex items).
Floats will shrink-wrap to fit their contents, and this is no different for a block-level flex container. An inline-level flex container behaves similarly to an inline-block box when laid out in its parent inline formatting context, which means it will also shrink to fit its contents by default.
If you’re supporting older Firefox browsers, using floats will cause Bad Things ™ to happen (see: bugzilla.mozilla.org/show_bug.cgi?id=660699)