Inline-flex and inline not working


Not going on the same level

You’ve got an extra div (which are by default display:block) in there.
image

It’s easier to see if you add an outline to the div element. That long line is a empty div

1 Like

What did I do wrong now?

I don’t know. What were you trying to accomplish?

The markup is different than the first post, so it’s hard to tell what you were trying to do…

Inline-grid container not in same level as flex container.

You mean this?

the display:flex; needed to be display:inline-flex;

1 Like

If you mean they don’t line up horizontally then they won’t because the flex element is a block container and any inline elements that follow will start on a new line.

If the flex container was an inline-flex container then they would both sit next to each other as they would both be inline-flex and inline-grid containers. However that is not the way you would approach this and if you wanted columns across the screen you would use a main container (flex or grid) to hold your columns.

I also see you are still coding fixed heights for your containers and this is something you will seldom do for elements that contain fluid content like text. That’s because the container can never grow and indeed your height:100vh on .container means that your middle section is too tall for the viewport to start with (because you have a header above it). When eventually you add more content than the 100vh the element will never grow and will simply overflow.

You should use min-height in most cases but in your case you would need a page wrapper with min-height:100vh and then the header. middle and footer are all contained in the wrapper. You can then automatically (with flex or grid) make the middle section stretch between the header and footer to give a viewport high initial design that can grow with content.

As Dave said above it all depends on what you wanted to achieve but generally you wouldn’t mix inline-grid and inline-flex at the same levels as that makes little sense. You can nest flex inside grid or vice versa but usually you would create the general framework with one technique rather than mixing things willy nilly. :slight_smile:

3 Likes

That’s what I mean.

I used fixed height because if one of my texts are longer relative to others, that one long text container will stretch the other text container leaving empty space.

Don’t understand a single sentence.

I want them to be separate in containers.

They still will be separate containers except that they are controlled by a common parent.

What happens when your text is taller than the height you specified or if I have zoomed my text to read?

Flex will automatically make elements the same height when done properly and doesn’t need fixed heights to do it.

That paragraph was explicitly clear and has a clean train of thought. If the concept eludes you then that’s something you really need to study and try to understand before you move on. I don’t expect you to understand everything but would like to see some progress. :slight_smile:

If there’s one thing you can take away from what I have said then it is this:

Avoid fixed heights on containers that hold fluid content. They are seldom required.

We can work on the other aspects of what you don’t understand but it’s a two way process. You have to tell me specifically what it is you don’t understand and then we can address each issue in turn.

I know it’s quite hard at the beginning because there is a lot to take in but it’ll be worth it in the end:)

1 Like

So what’s the point of linking the containers to a common parent when it does the same thing without linking to common parent?

I have a new problem too:

When In small screen and whenever I pass 300 px, It goes to the bottom despite being an inline?

Because you set a min-width of 500px. 500px > 300px

3 Likes

No, that wasn’t the question

It doesn’t do the same thing and you still don’t understand that direct children of a flexbox are created automatically as flex-items and their alignment controlled by the parent. Your approach is akin to creating a new table for every table-cell and has no logic to it.

No it’s the same problem I’ve been telling you about and of which you didn’t understand a word.

Your element called container is a minimum of 150px wide and your element called parent (really!) is a minimum of 500px wide and therefore for them to sit side by side they would need 650px of screen width. At less than that width they will wrap just like words in a sentence wrap. That’s why I said that you should have those two columns as part of a flex box approach and then you can control whether they need to wrap or not. At the moment you just have two disparate blocks of inline content just being pushed around by the space available.

You are still using height:100vh although I told you that won;t work as you expect. If your content in the left column is taller than the viewport the content will overflow as seen in this screenshot where the color does not extend to the bottom.

Screen Shot 2022-05-26 at 16.05.49

As I said above you need a structure to hold things together and avoid fixed heights where possible.

I’ve re-hashed your code into something usable but in all fairness I don’t really know the look you want to achieve and what plans you have but the following is a more structured approach. It could probably be simplified once the full details are known and indeed we could use grid for this also.

Note how it doesn’t go below the fold when it doesn’t need to but at the same time will stretch with content when it needs to.

You set the middle element to height:100vh which means that the initial page would have been 100vh + 10px padding + 100px for the header + 16px for the body margins tall. Effectively 126px too tall for any viewport no matter how tall.

These are important concepts to understand before you move on with this or you will continually make the same mistakes.

1 Like

Uh, yes it is. You asked…

The first column is set to a min-width of 150px;
image

The “parent” column is set to a min-width of 500px;
image

Things wrap when there is no space for it. 150px + 500px means it needs a minimum of 650px to have everything side by side. Actually a little bit more because you don’t define any margins, so the browser default is going to be used. You actually wrap at 665px in chrome

2 Likes

Don’t understand the comparison because never used tables. But I understand the former.

I wanted the parent container to be wide as hell, because there is a lot of free space, but I didn’t know it would wrap. I will do flexbox approach

How can my content be taller than my viewport if it is set to 100% making it stretch all the way down? I won’t add any block elements too if that’s what you mean by content overflowing because of block element blocking the vh.

.side-column > div{
  padding: 5px;
  border:1px solid #000;
}

what does the angle bracket mean?

I have been knowing these concepts(and I know most of CSS), but I just forgot them because I didn’t use them yet for my websites.

I explained exactly how above?

You have one element at 100vh but you also have other elements above it.

When you add both together they are greater than the viewport height. It’s basic mathematics so not sure what you don’t understand. (Notwithstanding that I have given you an exact example of how it should be done.)

100vh = the viewport height. If for example the viewport is 600px then 100vh = 600px. If your header is 100px and another element is 100vh then now you have content that is at least 700px tall which is now taller than the viewport.

100vh does not mean “just go to the bottom no matter where my top position is”.

1 Like

It’s called the child combinatorial and selects direct children of a parent element. I.e. it selects children not grandchildren.

Inline elements or inline-block elements ,or inline-flex or inline-grid elements are ‘shrink to fit’ algorithms. If no width is specified they will only be as wide as their content. That’s why they were the wrong choice for you in this case. Flex items (or grid items) can be made to take up all available space automatically without explicit sizing which is what I used in my demo of your code.

I’m severely deficient in math. so yeah… not my strongest field.

I will relearn the concepts again and ty for being patient with me.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.