Description

Presenting a react-based approach to work around flex layout's deficiency in expanding flex divs with column-wrap properties, outlined here. Note that this issue seems to be resolved in Chrome, but remains in Firefox and Safari.

View the demo with Firefox or Safari.

Example

import Column from "react-column-flex-wrap";

function Wrapper({ children }) {
  const optionalRef = useRef(null);

  return (
    <Column
      // optional props
      className="optional-class-name"
      maxHeight={100}
      style={style}
      ref={optionalRef}
      constantWidth
      columnReverse
      wrapReverse
    >
      {...children}
    </Column>
  );
}

Documentation

The core component employs several hooks to tabulate its children's dimensions and set its width. It will override display and flex-direction to column and wrap by default, but supports column-reverse and wrap-reverse. These properties can be set via props, in-line styles, or a css class.

Note that the column's max-height or height has to be specified via props, styles or css class (in px, %, vh, vw, em or rem).

Optional props: • id: string • key: string • ref: React.MutableRefObject<any> - Ref to be forwarded to the component • className: string - class name conferring styles • styles: CSSProperties - in-line styles • columnReverse: boolean - set flex-direction to column-reverse • wrapReverse: boolean - set flex-wrap to wrap-reverse • maxHeight: number - set max-height in px • dependencies: any[] - Dependencies for the core hook • constantHeight: boolean - Default false. Take the height of the first child as reference for the others to save on computation. • constantWidth: boolean - Default false. Take the width of the first child as reference for the others to save on computation. • effectOn: boolean - Default true. Boolean to toggle the effect