I am currently working on a react application and am stuck on a certain styling bug. In my application, I have react components that are almost identical to the ones seen below:

JS Fiddle Image

My question is how to get the smaller element (the div with class "wanted-long") to span the entire width of the parent (even the parts you have to scroll right to get to). This is currently not happening as we can see that the blue line in the picture only takes up the width of the visible screen and thus will stop if we scroll to the right a little further.

Thank you so much!

EDIT: Changed image of JSFiddle to more accurately reflect what is going on in my application.

CodePudding user response：

I think this answer will be helpful for you

.parent {
  width: 400px;
  max-width: 400px;
  overflow: scroll;
}

::-webkit-scrollbar {
  width: 100%;
   height:10px;
}
::-webkit-scrollbar-thumb {
  background: blue; 
}
.long-element {
    width:1000px;
    background-color:red;
    height:30px;
}
/*.wanted-long {*/
/*    width:100%;*/
/*    display:flex;*/
/*    background-color:blue;*/
/*    height:10px;*/
/*}*/

<div >
    <div ></div>
    <div ></div>
</div>

CodePudding user response：

Let's try this......

.parent {
  overflow: scroll;
}

::-webkit-scrollbar {
  width: 100%;
   height:10px;
}
::-webkit-scrollbar-thumb {
  background: blue; 
  width:100%;
}
.long-element {
    width:1000px;
    background-color:red;
    height:30px;
}
/*.wanted-long {*/
/*    width:100%;*/
/*    display:flex;*/
/*    background-color:blue;*/
/*    height:10px;*/
/*}*/

<div >
    <div ></div>
    <div ></div>
</div>

CodePudding user response：

You can use the scrollWidth property to get the scrollable width of the element.

const setWidth = (element) => {
  let width = element.parentNode.scrollWidth;
  element.style.width = width   'px';
}

setWidth( document.querySelector('.wanted-long') );