CSS FlexBox issue

Question

Can someone tell me how I can reduce width automatically on new child,

const Container = styled(View)(
  {
    padding: 3,
    flex: 1,
    minHeight: "50%",
    minWidth: 300,
  },
  variant({
    prop: "type",
    variants: {
      one: { flex: "1 0 100%", alignSelf: "stretch" },
      two: { flex: "1 0 50%", width: "50%" },
      three: { flex: "1 0 33%", width: "33%" },
    },
  })
);