Kevin Powell - Community•2mo ago

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.

export default function Experiment() {
  const [name, setName] = useState("");
  const [insult, setInsult] = useState("");

  const onSubmit = () => {
    setInsult(generateInsult(name));
  };

  return (
    <>
      <div className="flex h-full flex-col items-center justify-center">
        <div className="flex flex-col gap-2">
          <input
            className="rounded-md border-solid border-orange-300 p-2 text-[1rem] outline-none"
            onChange={(e) => setName(e.target.value)}
          ></input>
          <button
            onClick={onSubmit}
            className="self-start rounded-md border-solid px-2 transition"
          >
            Submit
          </button>
        </div>
        <div className="mt-6 w-[210px]">{insult}</div>
      </div>
    </>
  );
}

export default function Experiment() {
  const [name, setName] = useState("");
  const [insult, setInsult] = useState("");

  const onSubmit = () => {
    setInsult(generateInsult(name));
  };

  return (
    <>
      <div className="flex h-full flex-col items-center justify-center">
        <div className="flex flex-col gap-2">
          <input
            className="rounded-md border-solid border-orange-300 p-2 text-[1rem] outline-none"
            onChange={(e) => setName(e.target.value)}
          ></input>
          <button
            onClick={onSubmit}
            className="self-start rounded-md border-solid px-2 transition"
          >
            Submit
          </button>
        </div>
        <div className="mt-6 w-[210px]">{insult}</div>
      </div>
    </>
  );
}

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

missymae•2mo ago

items-center is maybe not what you want? items-start should keep the input positioned at the top with the rest following below.

tejveer•2mo ago

Yes, that would resolve the issue since it would position it at top-left, but I wanted all the content to be centered

missymae•2mo ago

You justify-center, so it would start at center-top, which you can then position where you want.

tejveer•2mo ago

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

tejveer•2mo ago

https://gyazo.com/ce91764098ace26c7f768f9e5efbb866

Gyazo

Gyazo Screen Video

tejveer•2mo ago

export default function Experiment() {
  const [name, setName] = useState("");
  const [insult, setInsult] = useState("");

  const onSubmit = () => {
    setInsult(generateInsult(name));
  };

  return (
    <>
      <div className="grid grid-rows-2 mx-auto w-[210px] h-full">
        <div className="self-end flex flex-col gap-2">
          <input
            className="rounded-md border-solid border-orange-300 p-2 text-[1rem] outline-none"
            onChange={(e) => setName(e.target.value)}
          ></input>
          <button
            onClick={onSubmit}
            className="self-start rounded-md border-solid px-2 transition"
          >
            Submit
          </button>
        </div>
        <div className="mt-6">{insult}</div>
      </div>
    </>
  );
}

export default function Experiment() {
  const [name, setName] = useState("");
  const [insult, setInsult] = useState("");

  const onSubmit = () => {
    setInsult(generateInsult(name));
  };

  return (
    <>
      <div className="grid grid-rows-2 mx-auto w-[210px] h-full">
        <div className="self-end flex flex-col gap-2">
          <input
            className="rounded-md border-solid border-orange-300 p-2 text-[1rem] outline-none"
            onChange={(e) => setName(e.target.value)}
          ></input>
          <button
            onClick={onSubmit}
            className="self-start rounded-md border-solid px-2 transition"
          >
            Submit
          </button>
        </div>
        <div className="mt-6">{insult}</div>
      </div>
    </>
  );
}

Refactored CSS

Gaming

Programming

How to get flex item to remain fixed?