CSS Make Block Next Line Without 100% Width

July 26, 2021

Use display: block; (this alone will cause width to be 100%) with width: max-content;.

<div>
  <span class="bg">Block 1</span>
  <span class="bg">Block 2</span>
  <span class="bg newline">New Line</span>
</div>
.bg {
  background-color: #ccc;
  margin: 1rem;
}

.newline {
  display: block;
  width: max-content;
}

NOTE: width: max-content; browser support

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.