4

I have been using Angular Material which uses display: inline-flex for its formfields. Combining that with other elements I get some strange whitespace which I can't explain.

Can someone explain why this results in a red box with a green box inside of it but the red box is bigger:

<div style="border: 1px solid red; width: 300px;">
  <div style="display: inline-flex;">
    <div style="max-height: 184px; overflow: auto; border: 1px solid green;">
      <table>
        <tbody>
          <tr>
            <td>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus elementum sapien mattis fermentum. Phasellus commodo ac leo vitae varius. Nunc consequat odio in finibus placerat. Ut neque turpis, bibendum vitae ante eget, efficitur maximus arcu. Morbi volutpat aliquam diam eget finibus. Ut mauris ex, volutpat sed lorem lacinia, lacinia ultricies mi. Fusce ullamcorper ipsum at magna pretium, aliquet tempor sapien placerat. Maecenas convallis maximus libero, sit amet vestibulum sapien varius quis. Duis ullamcorper ex nec eros malesuada imperdiet. Aliquam tempor convallis metus, in consequat lectus rutrum egestas.
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Whereas adding an 'invisible' element removes the whitespace:

<div style="border: 1px solid red; width: 300px;">
  <div style="display: inline-flex;">
    <div style="max-height: 184px; overflow: auto; border: 1px solid green;">
      <div style="max-height: 0;">&nbsp;</div>
      <table>
        <tbody>
          <tr>
            <td>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus elementum sapien mattis fermentum. Phasellus commodo ac leo vitae varius. Nunc consequat odio in finibus placerat. Ut neque turpis, bibendum vitae ante eget, efficitur maximus arcu. Morbi volutpat aliquam diam eget finibus. Ut mauris ex, volutpat sed lorem lacinia, lacinia ultricies mi. Fusce ullamcorper ipsum at magna pretium, aliquet tempor sapien placerat. Maecenas convallis maximus libero, sit amet vestibulum sapien varius quis. Duis ullamcorper ex nec eros malesuada imperdiet. Aliquam tempor convallis metus, in consequat lectus rutrum egestas.
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

The behavior seems to be the same in Edge/Chrome and Firefox.

In the case with Angular Material form fields with appearance outline adding vertical-align: top to the inline-flex container doesn't fix it. It also requires adding align-items: flex-start but that makes the suffix icons misalign: Example StackBlitz

Niels
  • 71
  • 5
  • Does this answer your question? [Why inline-flex element with clearfix has a weird white space?](https://stackoverflow.com/questions/38872653/why-inline-flex-element-with-clearfix-has-a-weird-white-space) – Sana Mumtaz Jul 20 '21 at 14:46
  • Duplicate: [Why inline-flex element with clearfix has a weird white space?](https://stackoverflow.com/questions/38872653/why-inline-flex-element-with-clearfix-has-a-weird-white-space) Use style `vertical-align: top` on your inline-flex container. – Sana Mumtaz Jul 20 '21 at 14:47
  • The answer seems to explain the situation that was presented in that question, but in my case there are no pseudo-elements that are doing anything, right? Apparently the table isn't 'display:table' in an inline-flex, but I'm still not clear why the height:0 element also 'fixes' it. The `vertical-align:top` fixes the issue so it's probably a duplicate but I'm still not entirely sure why :). – Niels Jul 20 '21 at 17:33

0 Answers0