1

I have a flexbox container with 3 items in it.

The middle one is static content and should neither grow or shrink, just take its natural size.

The right one should take at least 300px of space and then grow together with the left one to fill the remaining space (left one should take 80% of remaining space, right one 20%).

Now the left one is a little problem. It is another flex container which contains a dynamic list of items which can grow and shrink. Its items are also supposed to wrap around.

However, when I add items to the left container, the container starts growing, but neither do I understand why this happens nor do I know how to prevent it.

Any clues?

Edit: I noticed that this works just fine in Edge and FF. Only Chrome has this problem. My Chrome version is 59.0.3071.104.

Snippet:

const styles = {
  fontFamily: 'sans-serif',
  textAlign: 'center',
  display: 'flex',
  justifyContent: 'space-between',
  boxSizing: 'border-box'
};

const leftStyles = {
  border: '1px solid black',
  flex: '8 1 auto'
};
const leftInnerStyles = {
  display: 'flex',
  flexWrap: 'wrap',
  maxHeight: 72,
  overflowY: 'auto'
}
const midStyles = {
  border: '1px solid black',
  marginLeft: 6,
  flex: '0 0 auto'
};
const rightStyles = {
  border: '1px solid black',
  flex: '2 1 auto',
  minWidth: 300,
  marginLeft: 6
};

const itemStyles = {
  marginRight: 8,
  marginTop: 5,
  height: 28,
  border: '1px solid #C8C8C8',
  minWidth: 100,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center'
};

class App extends React.Component {
  constructor() {
    super();
    this.state = { items: [1, 2, 3] };
    this.add = this.add.bind(this);
    this.sub = this.sub.bind(this);
  }

  add () {
    this.setState({
      items: this.state.items.concat(
        this.state.items.length === 0
          ? 1
          : Math.max(...this.state.items) + 1
      )
    });
  }
  
  sub () {
    this.setState({
      items: this.state.items.slice(0, this.state.items.length - 1)
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.add}>Add item</button>
        <button onClick={this.sub}>Sub item</button>
        <div style={styles}>
          <div style={leftStyles}>
            I should not grow when more items are added
            <div style={leftInnerStyles}>
              {this.state.items.map(item =>
                <div key={item} style={itemStyles}>{item}</div>
              )}
            </div>
          </div>
          <div style={midStyles}>Other content<br/>I should not change size</div>
          <div style={rightStyles}>I shrink down to 300px</div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
Nimelrian
  • 1,726
  • 13
  • 23
  • 2
    Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). – Paulie_D Jun 21 '17 at 13:36
  • Yes, at some point it starts growing when more items are added and then at another point it stops. I'm trying to set up a jsbin for the demo, I thought codesandbox.io would be ok as well. – Nimelrian Jun 21 '17 at 13:47
  • 2
    The appropriate place for the code is in Stack Snippet,,,not some random link. – Paulie_D Jun 21 '17 at 13:47
  • What do you mean by "the container starts growing"? Horizontally? Vertically? I tested your example and, by adding more items to the array that you are using to fill that container, it grows vertically up to the max-height of 72px that is specified in the styles (leftInnerStyles), then it shows a scroll. If this is not what you want, how exactly do you want to limit the size of that element? – Luiz Henrique Guerra Jun 21 '17 at 13:49
  • The reason for the growth is `flex: 8 1 auto`. You need to use `flex: 8 1 0`. – Michael Benjamin Jun 21 '17 at 13:54
  • 1
    @Michael_B Thank you, that was the reason. The answer in the "original" question after the duplication flag did not help at all. – Nimelrian Jun 21 '17 at 13:59

0 Answers0