Theo's Typesafe Cult•2y ago

How to set w and h for a flexbox item

As it says on the tin, I want to set a flexbox child to a % of the parents height and a % of the parents width. Every time I do something like this, the height or width does not change depending on if I am going row or column. example code is as follows:

import { type NextPage } from "next";
import Head from "next/head";
import Link from "next/link";
import React from "react";

const Home: NextPage = () => {

  const [calcVal, setCalcVal] = React.useState(0);

  return (
    <>
      <Head>
        <title>Test Calculator App</title>
        <meta name="description" content="Generated by create-t3-app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className="flex min-h-screen flex-col items-center justify-center">

        <div className="flex-auto flex items-center justify-center h-1/2 min-w-full bg-cyan-500">
          {calcVal}
        </div>
        <div className="flex-auto min-w-full gap-2 bg-yellow-500 flex items-stretch justify-center">
          <button className="h-[25%] w-[50%] bg-green-900 hover:bg-green-600 text-white">+</button>
          <button className="h-[25%] w-[50%] bg-green-900 hover:bg-green-600 text-white">-</button>
        </div> 
      </main>
    </>
  );
};

export default Home;

import { type NextPage } from "next";
import Head from "next/head";
import Link from "next/link";
import React from "react";

const Home: NextPage = () => {

  const [calcVal, setCalcVal] = React.useState(0);

  return (
    <>
      <Head>
        <title>Test Calculator App</title>
        <meta name="description" content="Generated by create-t3-app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className="flex min-h-screen flex-col items-center justify-center">

        <div className="flex-auto flex items-center justify-center h-1/2 min-w-full bg-cyan-500">
          {calcVal}
        </div>
        <div className="flex-auto min-w-full gap-2 bg-yellow-500 flex items-stretch justify-center">
          <button className="h-[25%] w-[50%] bg-green-900 hover:bg-green-600 text-white">+</button>
          <button className="h-[25%] w-[50%] bg-green-900 hover:bg-green-600 text-white">-</button>
        </div> 
      </main>
    </>
  );
};

export default Home;

Thx in advance

1 Reply

benten•2y ago

you need to use flex-basis i think

Gaming

Programming

How to set w and h for a flexbox item