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

Html – How to make parent div show child div horizontal scrollbar?

I want to have a following page structure:

----------------------------------------
|              |s|                 |
| top-content  |p|     details     |
|--------------|l|                 |
|s | tree      |i|                 |
|c |           |t|                 |
|r |           |t|                 |
|o |           |e|                 |
|l |           |r|                 |
|l |           | |                 |
|--|-----------| |                 |
|  |  scroll   | |                 |
-----------------------------------

The top content must be ‘fixed’ and always be shown above the tree in the left pane so I use the wrapper.

I have:

.wrapper {
  height: 100%;
  display: flex;
  direction: ltr;
  flex-direction: column;
}

.tree-parent-div {
  direction: rtl;
  overflow: auto;
  width: 100%;
  height: inherit;
}

.tree-child-div {
  height: inherit;
  direction: ltr !important;
}
<div class='wrapper'>
  <div class='top-content'>Here lies top content</div>
  <div class='tree-parent-div'>
    <div class='=tree-child-div'>Here lies the js tree</div>
  </div>
</div>

I use ‘tree-parent-div’ and ‘tree-child-div’ system instead of using only ‘tree-child-div’ because I need vertical scrollbar to be on the left side.

Here is the dilemma. I want both scrollbars to be in ‘tree-parent-div’. Vertical scrollbar works well.
But when the content of ‘tree-child-div’ is bigger than the width of ‘tree-parent-div’ (for example there is a big number 4152674168794361742343847652361790349568463521678329456584736325145676 in the tree node name), the horizontal scrollbar is not visible.

Tags:

2

Answers


  1. 0

    The tree-child-div needs to be display: inline-block; (or similar).
    If you want your parent div to not be scrolled to the right initially, change the direction property.

    .tree-child-div {
  display: inline-block;
}
    Login or Signup to reply.
  2. 0

    The issue you’re facing arises from the combination of the direction: rtl property and the height: inherit property within flex containers. This combination can create unexpected behaviors with scrollbars.

    To achieve your goal (having both scrollbars inside tree-parent-div), you can utilize the overflow properties.

    Here’s a revised solution:

    .wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tree-parent-div {
  overflow-y: scroll; /* Vertical Scroll */
  overflow-x: auto;   /* Horizontal Scroll */
  width: 100%;
  height: calc(100% - 40px); /* Adjust this value according to the height of your top-content */
  direction: rtl;
}

.tree-child-div {
  direction: ltr;
  width: max-content; /* This ensures that the width of this div is as wide as its content */
}

.top-content {
  height: 40px; /* example height, adjust accordingly */
}

    Here’s your HTML structure:

    <div class="wrapper">
  <div class="top-content">Here lies top content</div>
  <div class="tree-parent-div">
    <div class="tree-child-div">Here lies the js tree with a big number 4152674168794361742343847652361790349568463521678329456584736325145676</div>
  </div>
</div>

    The key change here is adding width: max-content; to .tree-child-div. This ensures that the width of the child div is determined by its content. The overflow-x: auto; on .tree-parent-div ensures that if the child div overflows the parent in terms of width, the horizontal scrollbar appears on the parent.

    Note: Ensure you have a fixed height (or max-height) for your .wrapper, or ensure it’s contained within an element that has a fixed height, to make sure the vertical scrollbar works as expected.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search