How to get flex item to remain fixed?
So I was trying to make an insult generator for fun and ran into the following issue:
https://gyazo.com/29b1019b9220b9f1a8f25b242769735a
The content div at the bottom has fixed with auto height. And so when content randomly changes on every submit, the height changes relative to that content. The height's changes then also end up changing its sibling's position. The sibling is just the input-button pair div. The pair div and the content div are items in a flex column container.
I don't want it to be this way. I want the sibling div to have a fixed position where it is regardless of the content of its sibling. How do I do this?
Gyazo
Gyazo Screen Video
6 Replies
items-center is maybe not what you want? items-start should keep the input positioned at the top with the rest following below.
Yes, that would resolve the issue since it would position it at top-left, but I wanted all the content to be centered
You justify-center, so it would start at center-top, which you can then position where you want.
Ah yes, forgot about that
Then wouldn't I have to manually position both of the items?
Maybe grid would've been a better option for this
Ok, I got it working with grid
Refactored CSS