title: React Native Web, FlatList expands page
body: <p>I have some app, that looks like this</p>
  <p><img src="https://i.stack.imgur.com/vv7I8.png" alt="enter image description here" /></p>
  <p>I need FlattList to scroll independently, but instead of that it's expand the page and scrolls with everything else.</p>
  <p>I've tried to play with layout, changing 'flex' and 'justify' params, but it didn't give me any results.</p>
  <p>The only thing that forced FlatList to scroll by itself was changing the height of parent View by hand, that obviously not a solution.</p>
  <p><img src="https://i.stack.imgur.com/2hgD4.png" alt="enter image description here" /></p>
  <pre><code>import React from 'react'; import { StyleSheet, Text, View, TextInput , FlatList, Image} from 'react-native';
  
  
  const styles = StyleSheet.create({
      head: {
          height: 64,
          alignSelf: 'stretch',
          alignItems: 'center',
          flexDirection: 'row',
  
          backgroundColor: &quot;#FFF&quot;,
          shadowColor: &quot;#000&quot;,
      },
  
      search: {
          height: 48,
          flexDirection: 'row',
          alignItems: 'center',
          borderRadius: 16,
  
          marginBottom: 8,
          backgroundColor: &quot;#FFF&quot;,
      },
  
      card: {
          height: 240,
          margin: 8,
          backgroundColor: &quot;#FFF&quot;,
          borderRadius: 16,
      },
  
      filtersCard: {
          width: 280,
          height: 500,
          marginLeft: 16,
          paddingBottom: 34,
          alignItems: 'center',
  
          backgroundColor: &quot;#FFF&quot;,
          borderRadius: 16,
      },
  
      filtersCardText: {
          alignSelf: 'start',
          fontSize: 24,
          marginBottom: 8,
          marginTop: 16,
          marginLeft: 24,
      } });
  
  const App = () =&gt; {   return (
        &lt;View style = {{
            flex: 1,
            backgroundColor: '#cCcFd1',
            alignItems: 'center',
        }}&gt;
            &lt;View style = {styles.head}&gt;
                &lt;Text style = {{fontSize: 48, fontWeight:900, paddingLeft: 16, selectable: false}}&gt;HEAD (shouldn't move)&lt;/Text&gt;
            &lt;/View&gt;
  
            &lt;View style={{ flexDirection: 'row', alignItems: &quot;flex-start&quot;, marginTop: 16}}&gt;
                &lt;View style={{width: 872}}&gt;
                    &lt;View style={styles.search}&gt;&lt;Text&gt;  Search (shouldn't move)&lt;/Text&gt;&lt;/View&gt;
  
                    &lt;View style={{height: 400}}&gt;
                        &lt;FlatList
                            data={[ 1, 2, 3, 5, 8]} //just for demo
                            renderItem={({item}) =&gt; &lt;View style={styles.card}/&gt;}
                        /&gt;
                    &lt;/View&gt;
  
                &lt;/View&gt;
  
                &lt;View style={styles.filtersCard}&gt;&lt;Text&gt; Filters (shouldn't move)&lt;/Text&gt;&lt;/View&gt;
            &lt;/View&gt;
        &lt;/View&gt;
  
    ); }
  
  export default App;
  </code></pre>