Question 42463 in Html Question posted in
Some basic documentation can be found here.

Child element does not stretch when overflowing – Html

I have a container div with overflow auto. When a child element has long text it will overflow the container causing it to show x-scroll. So far no problem.
The issue is that the child element does not stretch with the container width including the available scroll causing it to look cut off when scrolling the container:

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

.h-full {
  height: 100%;
}

.flex {
  display: flex;
}

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

.item.selected {
  background-color: green;
  color: red;
}

.item {
  white-space: nowrap;
}

<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">1Loooooooooooooong text that does not wrap.... aaaaaaaaaa sssssssss ddddddddd</div>
    </div>
    <div class="flex p-2 items-center item">
      <div class="flex items-center">-</div>
      <div class="whitespace-nowrap">2Loooooooooooooong text that does not wrap.... aaaaaaaaaa sssssssss ddddddddd</div>
    </div>
    <div class="flex p-2 items-center item">
      <div class="flex items-center">-</div>
      <div class="whitespace-nowrap">3Loooooooooooooong text that does not wrap.... aaaaaaaaaa sssssssss ddddddddd</div>
    </div>
  </div>
</div>

https://jsfiddle.net/690j7bsw/

What am I missing here?

Thanks!

Tags:

3

Answers


  1. 0

    Add the selected class to the div-element with the long text

    Next adjust your CSS selector to .item .selected {...}

    Login or Signup to reply.
  2. 0

    This is a very common issue while using whitespace-nowrap with overflow property.

    To fix this, you need to change display: flex to display: inline-flex.

    Like this:

    .flex {
  display: inline-flex;
}

    This is because block elements take 100% width even if the text is not wrapping. This is not the case with inline elements. They always take the width of the content, that’s exactly what we’re leveraging here.

    Note: You can rename the class flex to inline-flex to make it more intuitive.

    https://jsfiddle.net/3xo0gq1p/

    Login or Signup to reply.
  3. 0

    Just add width: fit-content; to .item:

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

.h-full {
  height: 100%;
}

.flex {
  display: flex;
}

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

.item.selected {
  background-color: green;
  color: red;
}

.item {
  white-space: nowrap;
  width: fit-content; /* 👈 */
}
    <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">1Loooooooooooooong text that does not wrap.... aaaaaaaaaa sssssssss ddddddddd</div>
    </div>
    <div class="flex p-2 items-center item">
      <div class="flex items-center">-</div>
      <div class="whitespace-nowrap">2Loooooooooooooong text that does not wrap.... aaaaaaaaaa sssssssss ddddddddd</div>
    </div>
    <div class="flex p-2 items-center item">
      <div class="flex items-center">-</div>
      <div class="whitespace-nowrap">3Loooooooooooooong text that does not wrap.... aaaaaaaaaa sssssssss ddddddddd</div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search