Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Inline-flex doesn't fit content when wrapped [duplicate]

Tags:

html

css

flexbox

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:

enter image description here

like image 497
user3607282 Avatar asked Nov 07 '17 06:11

user3607282


People also ask

Why is flex-wrap wrap not working?

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.

What does the flex-wrap wrap rule do?

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.

Does flexbox work with inline elements?

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.


1 Answers

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%;}
like image 164
Mostafa Yousef Avatar answered Sep 28 '22 00:09

Mostafa Yousef