Fit content to div

Hello everyone,

I’m creating some website with fixed image backgrounds with width and height set to 100%, I have one problem, when content goes out 100% it’s moved over next div. How to fix div content to stay inside div and make more height for that div but image remain fixed?

https://codepen.io/lenon95x/pen/yzXaaG

This is just example, on my website I use flexboxes to position elements.

Fixed heights are rarely a good idea in RWD, if you want to set a height it’s usually best to use min-height rather than just height, just like it’s best to use max-width instead of width.
Changing the heights to min-height allows the text to be contained.

1 Like

I have now problem that content is cutted out. I’m using flex-box to position my elements.

I’m not sure what you mean by that. Could you explain further?

1 Like

First div contains list items, when I resize window content that doesen’t fit the div is hidden, when I use overflow: auto; div gets scroll bar. I used min-height as you said. I use flexbox to position elements.

If needed I can share code via private message.

Why can’t you post the code here or in a Codepen?

I’m not sure what role flexbox would play in this layout, you may b eover complicating things.

1 Like

Sounds as though you still have a fixed height set somewhere because otherwise the parent would stretch to fit the content. Look as Sams example where the text scrolls fine.

In the end we would need a working example to debug fully :slight_smile:

1 Like

Sorry I forgot to tell that problem is solved, I had problem with absolute positioned element, it was set to fixed height so that cause my problem.

2 Likes

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