[EuiFlexGroup] Responsive flex layouts do not work with buttons properly

[efreeti]

The following markup is creating broken layout when switching to small screen mode (responsive support):

    <EuiFlexGroup direction="row">
      <EuiFlexItem>
        <EuiFlexGroup direction="column">
          <EuiFlexItem>text</EuiFlexItem>
          <EuiFlexItem>
            <EuiButton>text</EuiButton>
          </EuiFlexItem>
        </EuiFlexGroup>
      </EuiFlexItem>
    </EuiFlexGroup>

Here's how it looks like:

The fix seems to be the following:

    <EuiFlexGroup direction="row">
      <EuiFlexItem>
        <EuiFlexGroup direction="column">
          <EuiFlexItem>text</EuiFlexItem>
          <EuiFlexItem>
            <EuiButton contentProps={{ style: { height: 'auto' } }}>text</EuiButton>
          </EuiFlexItem>
        </EuiFlexGroup>
      </EuiFlexItem>
    </EuiFlexGroup>

Here's how it looks (also expected look for the first code sample):

[snide]

This is because direct children of flex items get flex properties, which when applied to items that already have some styling can conflict. If you pass something more neutral inside, you'll get what you assumed. For example, wrap the button in a single div.

This is a quirk of the flex system that probably could use some more documentation.