Develop Reference

ListItem Fill List And Overflow

I want to have a ListItem that vertically fills the list completely, and sometimes overflows it.
That means I need access to the height of the empty space in the list. It would be the minHeight, and sometimes I would add some extra height to it. How do I have access to that?
I tried display=flex and flexDirection=column on the List and then flexGrow: 1 on the ListItem and it did fill the empty space of the list, but never overflowed as I wanted.
Any suggestions?

I think you can handle this issue in pure CSS. You should add these styles to your list element:
height: auto;
overflow-y: auto;
then when your list fills, it scrolls automatically

allow the parent to scroll the whole width/height of child element even when child scale is transformed by matrix

So I've got a div with a child element, and the child element is zoomable. To zoom the child element, I use matrix to transform to the new scale, but I'm noticing an issue: when the scale is greater than 1, the child element is larger than the scroll bar of the parent element, so when you scroll to the end, some of the child element is cut off. How do I fix this?
EDIT
I've tried setting overflow: scroll as opposed to the overflow: auto that I"m currently using, and I've tried expanding the width/height of the parent div, but neither worked. Expanding the width/height of the parent div just makes it larger on the page
EDIT 2
According to this stackoverflow question, what I needed was to add the style transformOrigin: 0 0 when I zoom the chart. that fixes the cropping

Hope this helps someone who finds this answer via Google like I did.
I had an issue like this where the parent wouldn't scroll past the original height of the child, so if I scaled the child up, the parent would stop scrolling before reaching the end of the child element. And if the child was scaled down, the parent would scroll past the end of the child element, letting the child element scroll out of view.
The way I solved this problem was to put the child element inside a wrapper element, with the height of the wrapper element set to the original height of the child element, and the wrapper element set to overflow = hidden. Then, when scaling the child element up or down, I change the height of the wrapper element by the same scale (via javascript).
HTML
<div id="parent">
<div id="wrapper">
<div id="child">
Content goes here
</div>
</div>
</div>
CSS
#parent {
height: 300px;
overflow: auto;
}
#wrapper {
height: 1200px;
overflow: hidden;
}
#child {
height: 1200px;
}
JavaScript/jQuery
function zoomChild(scale) {
var originalHeight = 1200;
$('#child').css('transform', 'scale(' + scale + ')');
$('#wrapper').css('height', (originalHeight * scale) + 'px');
}

Is there a way to scroll up a stateless component?

I have two divs on the page side by side and the left one is a stateless component showing the information regarding the option selected from the right side.
The page itself has overflow: hidden and the left side component has overflow-y: scroll allowing the user to scroll down and up.
Until here everything is good however when the user scrolls down and then select another piece in the right side, I should scroll this stateless component up.
return (
<div
style='display: flex; flex: 1 1 0; height: 100%; overflow-y: scroll'
ref={myElement => {
this.myElement = myElement
}}
>
My content
</div>
)
And once we have a ref on this element, I could have something like this:
this.myElement.scrollTop = 0
I am trying to put a ref in this div to be able to scroll once this component receives any update as https://stackoverflow.com/a/33204783/1696029 but the ref does not work with stateless component.
Any ideas how can I scroll up only this left stateless component?

Consider the following component heirarchy
<Parent>
<LeftComponent />
<RightComponent />
</Parent>
You can define a ref function for LeftComponent on Parent.. Something like
leftComponentRefFunction(myElement) {
this.myElement = myElement
}
Dont forget to bind this function inside parent constructor.
And after this, send leftComponentRefFunction function as prop to the stateless component
<LeftComponent refFunction={this.leftComponentRefFunction} />
Now inside the LeftComponent use the prop function to set the ref
return (
<div
style='display: flex; flex: 1 1 0; height: 100%; overflow-y: scroll'
ref={props.refFunction}
>
My content
</div>
)
What we're basically doing here is lifting the state logic up to the parent component.
Now you'll have access to the leftComponent ref on the parent this. and hence you will be able to set the scroll to 0

material-ui input select attribute hides the body overflow-y scroll - react js

I am using material-ui v3.1.2 with react js v16.5.2. In my page, there are many places where i am using <TextField> with select attribute. So, whenever i click on that TextField and when the dropdown appears, it hides my parent vertical scrollbar causing some ui shifting towards right as it hides the scrollbar. I don't want that to happen, so any solution would be of great help.
Here is the screenshot of before opening the dropdown,
Here is the screenshot of after opening the dropdown,

A workaround for this issue can be to use the Select component of material-ui and use the 'disableScrollLock: true' property. But in that case, the scroll bar will not disappear on opening select, so the whole page will be scrollable while the select options are open.
<Select
MenuProps={{
disableScrollLock: true,
}}
...
/>

I have a problem using Select component, so The solution using a textField:
<TextField select SelectProps={{ MenuProps: { disableScrollLock: true } }}/>

Answering only if it helps somebody.
By default whenever you open the dropdown using mat <Menu></Menu> it will add overflow: hidden; to the body node.
One possible solution is that you add overflow-y: auto !important; on the body element and this also worked for me.
For example:
Here you see I have added overflow-y: auto !important; in my body style
Now here you see mat is automatically assigning overflow: hidden; to my body element. Which I have catered by !important;

Input Field Overflow Moves Containing Div

Since the way I had initially written my question received some down votes, and the link to the example no longer contains the problem, I'll describe the Chrome-specific issue I was encountering.
When highlighting overflowing text in an input field in chrome, if I dragged my mouse to the right of the page, the containing div would slide to the left. Initially I thought this issue was being caused by the input field, but it turned out that I had a separate div inside the same container that was wider than the container.
#container {
width: 100px;
}
#inputfield {
width: 50px;
}
#otherthing {
width: 300px;
}
HTML:
<div id="container">
<input type="text" value="Null" />
<div id="otherthing"></div>
</div>

Whilst the format of your question looks like link-spam, I clicked on it any way. The reason it's happening is because you're effectively highlighting all the text within that container, which has an element that overflows the right hand bounds. Take a look at <div id="selection"> - it is wider than the container, therefore pushing the total width of all the children beyond the bounding box. The browser is trying to help you by auto-scrolling the content to allow you to see what you're highlighting.
In short: fix your CSS for the #selection element so it doesn't overlap the container.