KPC
Kevin Powell - Community•8mo ago
jcayzac

How to avoid text to wrap when there's space, using flex or grid?

I want the author to be on the left, the category on the right. If the container is wide enough, the text should not wrap. The two elements (author and category) may wrap on small screens (flex-flow: row wrap I guess?).
No description
1 Reply
jcayzac
jcayzacOP•8mo ago
aaaaannnnnnd it's solved! 
.attribution {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 1rem;

  .author, .category {
    display: flex;
    white-space: pre;
    flex: 0 0 auto;
  }
}
.attribution {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 1rem;

  .author, .category {
    display: flex;
    white-space: pre;
    flex: 0 0 auto;
  }
}

Did you find this page helpful?