Display: Flex And New Line For Captions - What Is The Proper Way?

In a project that I recently joined I have code structure like this: // HTML / React Some text

Solution 1:

Add flex-wrap: wrapto the Container and then make the ContentText be 100% wide, using i.e. width: 100%;

The above will make the ContentText take full width and the flex-wrap: wrap will allow the items to wrap, hence pushing the Caption and Date to a new line.

Stack snippet

Root {
  display: flex;
  width: 100%;
  height: 72px;
  align-items: center;
  border-radius: var(--radius-medium)px;
  border: 1px solid var(--color-gray2);
  padding: 12px 4px;
}

Content {
  display: flex;
  flex-wrap: wrap;             /*  added property  */
  align-items: center;
  flex: 1 0 auto;
  padding: 0 8px;
} 

ContentText {                  /*  added rule  */
  width: 100%;
}

<Root>
  <Content>
    <ContentText>Some text</ContentText>
    <Caption>10 steps</Caption>
    <Date>March 22nd</Date>
  </Content>
</Root>

Share