I have a container with an inner div containing items.
<div class="container">
<div class="inner">
<span class="item">1</span>
</div>
</div>
The container or the inner div width is not fixed. The container can be resized. And the inner div should always fit it’s content.
What should happen is, the inner div should always be centered inside the container.
When items inside the inner div can no longer fit inside the container it should break into a second line.
I’m using display: flex
and display: inline-flex
to center the inner div. But when the items wrap into a second line the inner div takes the container’s width and doesn’t fit the content anymore. Because of that it will not be centered to the container.
Here is a fiddle of how it currently is.
How can I always make the inner div centered to the container at all times while keeping the inner div width dynamic.
Expected results:
If you add content and/or width and/or flex-basis to one or more items, and the items grow to exceed 800px (the width of the container), then your flex items will wrap. But note, they won't wrap based on your re-sizing of the browser window, because the container doesn't occupy width: 100% of the viewport.
The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
You cannot display flex items inline; otherwise you don't actually have a flex layout. It is not clear what exactly you mean by "vertically align" or why exactly you want to display the contents inline, but I suspect that flexbox is not the right tool for whatever you are trying to accomplish.
add:
.inner{margin: auto 15%;}
this will keep the inner div centered.
or simply set the width ratio you want, for example
.inner{width: 80%;}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With