row-intrinsic-inline-container-size-ref.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

<link rel="help" href="https://drafts.csswg.org/css-grid-3">

<link href="resources/masonry.css" rel="stylesheet">

<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com">

<style>

.grid {

    display: grid;

    background: gray;

    align-items: start;

.flex {

    display: flex;

    flex-direction: column;

    overflow: visible;

    flex-wrap: nowrap;

.max-content-item {

    width: max-content;

    height: 20px;

</style>

<body>

  <p>Test that masonry containers are correctly sized when an intrinsic inline size is specified.</p>

  <div class="grid" style="width: max-content">

    <div class="flex">

      <div class="first-track max-content-item">This is some text</div>

      <div class="second-track max-content-item">Some larger words in this sentence</div>

      <div class="third-track max-content-item">The cat cannot be separated from milk</div>

    </div>

  </div>

  <div class="grid" style="width: max-content">

    <div class="flex">

      <div class="first-track max-content-item">This is some text</div>

      <div class="second-track max-content-item">Some larger words in this sentence</div>

      <div class="third-track max-content-item">The cat cannot be separated from milk</div>

    </div>

  </div>

  <div class="grid">

    <div class="flex">

      <div class="first-track max-content-item">This is some text</div>

      <div class="second-track max-content-item">Some larger words in this sentence</div>

      <div class="third-track max-content-item">The cat cannot be separated from milk</div>

    </div>

  </div>

</body>

</html>