flexbox parent smaller than child elements on browser resize [duplicate]

Answer 1

1. It happens, because your .parent is a normal block element (flex is also a block-level container) and that is initialized with width:auto;, which is in your case the width of the viewport. So scrolling to the right will show white space because your div's width is smaller than the whole scrollable area.

2. You do that with setting the .parent to an inline element, which will respond to its childrens width.

3. Yes, just use display: inline-flex; on the .parent.

.parent {
  height: 400px;
  width: 100%;
  background-color: green;
  display: inline-flex;
}

.item {
  flex: 1;
  height: 100px;
  background-color: pink;
  padding: 10px;
}

  
looooooooooooooooooooooooooooong
  
looooooooooooooooooooooooooooong

See display property on w3schools.