Kevin Powell - Community•3mo ago

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?).

1 Reply

jcayzac•3mo 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;
  }
}

Gaming

Programming

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