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?

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.


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