title: How to set mat-select height and width as expected?
body: <p>I want to use flex to display two column side by side.
  The first column is a <code>mat-input</code> which is an input box. The second one is a <code>mat-select</code> dropdown. So the two item's width are same and there is a gap between two columns. Thus I calculate the width by the code.</p>
  <pre><code>width: calc((200% - #{$gap}) / 2);
  </code></pre>
  <p>The reason to use 200% is child element width is half of the parent. I have two issues.</p>
  <ol>
  <li>The first column is not shown.</li>
  <li>The second column width and height are not expected.</li>
  </ol>
  <p>Please see the <a href="https://stackblitz.com/edit/angular-oeen5w?file=src/styles.scss" rel="nofollow noreferrer">StackBlitz Demo</a></p>