0

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

enter image description here

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%" },
    },
  })
);
Curious_guy
  • 161
  • 11
  • `flex-grow: 1` will do that (the single item on the second row has no siblings to restrict its expansion). It's a common problem. Check the duplicates for solutions. – Michael Benjamin Feb 17 '22 at 17:06
  • duplicates ? and do i need to add flexGrow in items or grid , sorry I am pretty new in flexbox – Curious_guy Feb 17 '22 at 19:03
  • The duplicates contain various solutions to the problem in your question. Go through them. Let me know if you have any questions. – Michael Benjamin Feb 21 '22 at 02:30

0 Answers0