Prevent an element from becoming a flex item inside a flexbox

[Chronzam]

Here is the pen: https://codepen.io/Supersudo/pen/XWKxgxO

I want .invalid-feedback to show below the divs. If I set it to display: block, the layout breaks. Is there a way to fix this?

[m_hutley]

… don’t put it inside the div container?

[Chronzam]

That was my old layout. But I noticed the appearance of .invalid-feedback depends on the .is-invalid class.

If put the .invalid-feedback outside of .input-group, how would it detect if the .input-group’s child got an .is-invalid class?

[PaulOB]

Adjust the invalid rule to this:

 ~ .invalid-feedback {
  display: none;
  flex:1 0 100%;
  // display: block;
 }

Then remove min-width:0 from here;

.custom-multiple {
	position: relative;
	-ms-flex: 1 1 0%;
	flex: 1 1 0%;
	/*min-width: 0;*/
	margin-bottom: 0;
	transition: none;

That seems to fix the problem and the error will be 100% underneath the three selects.

The min-width:0 is supposed to allow inputs to scale below their default in Firefox but I can’t see it does anything useful here apart from break the layout when you add the error. I’ll need to research a bit more as I don’t understand why they all collapse to the left of the line when min-width:0 is present unless they are assuming the three inputs are zero width and the error is 100% and therefore no wrap occurs. Looks like a bit of a bug to me.

[edit]
If you have 3 selects in a row then you can also avoid the problem by setting them to 33% (flex:1 1 33%).

e.g.

.custom-multiple {
	position: relative;
	-ms-flex: 1 1 33%;
	flex: 1 1 33%;
	min-width: 0;
	margin-bottom: 0;
	transition: none;

The problem with the 0% you used is that you set the select to width:100% but 100% of 0% is zero so they all overlap.

[Chronzam]

Ohhhh, noted. Thanks!