Css: Stop Second Child (paragraph) From Enlarging Width Of Parent

I have flexbox list of boxes which width is controlled by select dropdown and button next to it. When I show error(s) below that, and the error(s) are long, the box got enlarged (i

Solution 1:

If I'm correct, you just need to wrap your children divs which would be the dropdown and button as child 1 and the error message as child 2, wrap them inside a parent div with inline-block. Set the child 2 flex-grow to 1 and width to 0, then ta-da

$("#toggle-errors").on("click", function(){
	$(".errors").toggle();
});

.wrapper > div {
  border: 1px solid tomato;
}

.errors {
  display: flex;
}

.errorsp {
  flex-grow: 1;
  width: 0;
}

.wrapper {
  display: inline-block;
}

.items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.item {
  display: block;
  padding: 1em;
  margin: 1em;
  border: 1px grey solid;
  background: white;
  flex-grow: 1;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttonid="toggle-errors">Toggle Errors</button><divclass="container"><ulclass="items"><liclass="item"><h2>Title 1</h2><divclass="wrapper"><div><selectname="item-1-options"id="item-1-options"><optionvalue="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</option><optionvalue="2">Lorem ipsum dolor sit amet</option><optionvalue="3">Lorem ipsum dolor</option></select><button>Select</button></div><divclass="errors"><pclass="error">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies.</p></div></li><liclass="item"><h2>Title 1</h2><divclass="wrapper"><div><selectname="item-1-options"id="item-1-options"><optionvalue="1">Lorem ipsum dolor</option><optionvalue="2">Lorem ipsum dolor sit amet</option><optionvalue="3">Lorem ipsum dolor</option></select><button>Select</button></div><divclass="errors"><pclass="error">Lorem ipsum dolor sit amet, consectetur adipiscingLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies. Lorem ipsum dolor</p></div></li><liclass="item"><h2>Title 1</h2><div><selectname="item-1-options"id="item-1-options"><optionvalue="1">Lorem ipsum dolor sit amet, consectetur.</option><optionvalue="2">Lorem ipsum dolor sit amet</option><optionvalue="3">Lorem ipsum dolor</option></select><button>Select</button></div></li></ul></div>