I have a StackBlitz here https://stackblitz.com/edit/react-ts-jefhjh?file=App.tsx,styled.ts

It's a simple react app with Typescript

I have a style component that uses flex-box to position two columbns next to each other.

I'm passing the widths of the columns into the wrapping container like <FlexContainer width={['60%', '40%']}>

And then using the values in the component like

export const FlexContainer = styled.div<IProps>`
  border: 1px solid red;
  height: 500px;
  display: flex:
  // align-content: stretch;

  .divOne{
    border: 2px solid pink;
    height: 500px;
    width: ${(p) => p.width[0]};
  }

  .divTwo{
    border: 2px solid green;
    height: 500px;
    width: ${(p) => p.width[1]};
  }

`;

Only one the second column is being displayed.

I know the first column is getting a value because if I use align-content: stretch the first column displays but the layout is wrong.

I'm sure the mistake the way I'm using flex-box

How can I get the layout to work ?

CodePudding user response：

There was a colon instead of a semicolon. Use display: flex; instead of display:flex:. See https://stackblitz.com/edit/react-ts-quu5ce?file=App.tsx,styled.ts

import styled from 'styled-components';

interface IProps {
  width?: string[];
}

export const FlexContainer = styled.div<IProps>`
  border: 1px solid red;
  height: 500px;
  display: flex;

  .divOne{
    border: 2px solid pink;
    height: 500px;
    width: ${(p) => p.width[0]};
  }

  .divTwo{
    border: 2px solid green;
    height: 500px;
    width: ${(p) => p.width[1]};
  }
`;