Question 336788 in CSS Question posted in
Some basic documentation can be found here.

CSS row heights cannot be restricted when using grid-auto-rows

The container with the grid has this css:

.container {
    grid-row: 2;
    grid-column: 1;
    display: grid;
    grid-auto-rows: minmax(0, 1fr);
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
}

Then each "cell" in the grid has this:

.item {
    user-select: none;
    display: flex;
    flex-grow: 1;
    overflow-x: visible;
    overflow-y: hidden;
    width: 100%;
    height: 100%;
}

… inside each item is another grid with 3 rows:

.item-content {
    display: grid;
    grid-template-rows: 20px 20px 1fr;
    overflow-y: hidden;
}

then inside those rows, it’s just text.

The problem is when the text on the 3rd row is very long (1fr – dynamic height) … the item grows, the overall container grows and nothing seems to be able to stop it.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This was fixed in the end by simply adding this to the parent div of the container (of the parent shown in the question):

    min-height: 0;

  2. 0

    If you don’t want the inner rows to wrap, you may want the overflow: hidden; white-space: nowrap; text-overflow: ellipsis; combo on each of them.

    .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5em;
}

.item {
    user-select: none;
}

.item-content {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}
    <div class="container">
  <div class="item">
    <div class="item-content">
      <span>Just Text Row 1</span>
      <span>Just Text<br> Row 2</span>
      <span>Just Text Row 3 but, like, a lot of text that overflows? Lorem Ipsum etc. etc.</span>
    </div>
  </div>
  <div class="item">
    <div class="item-content">
      <span>Just Text Row 1</span>
      <span>Just Text Row 2</span>
      <span>Just Text Row 3</span>
    </div>
  </div>
  <div class="item">
    <div class="item-content">
      <span>Just Text Row 1</span>
      <span>Just Text Row 2</span>
      <span>Just Text Row 3</span>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search