Select element grows differently than input in display flex

Question

I\'m getting an unexpected behavior in my setup. The inputs grow horizontally as expected but on the row with a select control, the growth seems to be distorted.

I s

Answer 1

The parent of the select needs to be set at 100% for it to stretch since now it's constrained.

.input-element {width:100%;}

By the way, it has nothing to do with the flex-grow because the issue of width still existed when I removed that style, which led me to see it was the containing element's problem :)

https://jsfiddle.net/hhft4ke6/

div.full-page {
  margin: 20px;
  padding: 20px;
  background: ghostwhite;
}

div.input-section {
  border: 3px none darkorchid;
  width: 600px;
}

div.input-title {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 18px;
  border-bottom: 2px solid darkorange;
  padding-bottom: 5px;
}

div.input-row {
  border: 3px none darkolivegreen;
  display: flex;
}

div.input-element {
  border: 3px none darkcyan;
  padding: 10px;
  flex-grow: 1;
  width:100%;
  // display:flex;
}

div.input-element input,
div.input-element select {
  width: 100%;
  // border: solid 1px mediumvioletred;
  // padding: 0;
  // margin: 0;
}

div.input-caption {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: darkgrey;
  font-size: 14px;
}

  


    

      
Title 1

      

        

          
Uno
          
        
        

          
Duo
          
        
      

    

    

      
Title 2

      

        

          
Tress
          
        

        

          
Quatro
          
            The one and only