Stretching Issue with children Overflow

November 27, 2023

I’ve set up a container div with an overflow set to auto. When a child element contains long text, it naturally overflows the container, triggering a horizontal scroll (x-scroll). While this is expected, the challenge arises when the child element fails to stretch to the full width of the container, leaving it looking truncated as the container is scrolled.

<div class="flex flex-col h-full">
  <div class="h-full container">
    <div class="flex p-2 items-center item selected">
      <div class="flex items-center">-</div>
      <div class="whitespace-nowrap">text1</div>
    </div>
    <div class="flex p-2 items-center item">
      <div class="flex items-center">-</div>
      <div class="whitespace-nowrap">text2</div>
    </div>
  </div>
</div>

.container {
  overflow: auto;
  resize: horizontal;
  min-width: 10rem;
  max-width: 25rem;
}

.item {
  white-space: nowrap;
}

>Solution :

You should fix the .flex class. Please change display:flex to display:inline-flex.

This happens as the inherent nature of block elements, which always take 100% width, irrespective of text wrapping.

In contrast, inline elements dynamically adjust their width based on the content, and this characteristic is precisely what we are capitalizing on in this context.

.item {
  white-space: nowrap;
}

.flex-col {
  flex-direction: column;
}

.flex {
  display: inline-flex;
}

.container {
  overflow: auto;
  resize: horizontal;
  min-width: 10rem;
  max-width: 25rem;
}