0

When I have a simple View with another View inside it that has a higher height, it looks like this:

<View horizontal={true} style={{height: 100, width: 100, backgroundColor: "red"}}>
    <View style={{height: 150, width: 50, backgroundColor: "blue"}}></View>
</View>

A View being shown that is higher than its parent View

In other words, I can see the 50px of the blue View that overflow the red one.

When I change the parent View into a horizontal ScrollView however, the overflowing 50px of the blue one are clipped, like this:

<ScrollView horizontal={true} contentContainerStyle={{height: 100, width: 100, backgroundColor: "red"}}>
    <View style={{height: 150, width: 50, backgroundColor: "blue"}}></View>
</ScrollView>

A view that is higher than its parent horizontal ScrollView and therefore being clipped

I want the ScrollView to not clip the overflowing blue part of its child. How do I do this?

I already tried adding overflow: "visible" to the styles, but that didn't work.

hm1912
  • 314
  • 1
  • 10
  • Just remove `height: 100` from `scrollview` – Harrison Dec 10 '20 at 09:33
  • @Harrison in my use case I need to set a height though, so I'm afraid that won't work. – hm1912 Dec 10 '20 at 20:58
  • in that case you can set `height:150` to your `scrollview`. If you want the scrollview to a height less than its children then it automatically cuts it off. It's the default behavior to allow the user to scroll down to show children that exceed parent height. Hopefully that makes sense – Harrison Dec 12 '20 at 16:05
  • @Harrison yes, that makes sense, but I want to change that default behaviour. I can't change the height of the `ScrollView` to 150 because the normal height is 100, in my use case containing DropDown boxes. When clicking on those DropDowns, they expand, having a higher height than the parents. – hm1912 Dec 13 '20 at 13:44
  • what about trying `minHeight: 100`? – Harrison Dec 13 '20 at 13:45

0 Answers0