10 replies

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>
    </>
  );
}

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

How to get flex item to remain fixed?

Similar Threads

Similar Threads

Similar Threads