Repository: mui/material-ui (TypeScript)
Date: 2020-02-08 19:14:06+00:00
Task type: Bug Fix

Issue:
[Divider] Height is not correct for vertical divider in a flexbox
<!-- Provide a general summary of the issue in the Title above -->
When a divider component with vertical orientation is inside a container with flex and height set to 100%, the height is calculated as `0px` in chrome. 
<!--
  Thank you very much for contributing to Material-UI by creating an issue! ❤️
  To avoid duplicate issues we ask you to check off the following list.
-->

<!-- Checked checkbox should look like this: [x] -->

- [x] The issue is present in the latest release.
- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Current Behavior 😯
The vertical dividing lines do no appear to show up on the page in chrome, but when inspecting the page, I can find the `<hr>` tag and see that it has `height: 100%` and a calculated height of `0px`. When opening the page in firefox the vertical lines appear as expected. 

This only happens when the parent component has flex properties. If I wrap the divider component in an empty `<span>`, the lines do appear. 

<!-- Describe what happens instead of the expected behavior. -->
The height of the lines should be calculated to be the full hight of its parents when set to height: 100%. 
## Expected Behavior 🤔

In all cases, the height of the divider component should be calculated as the height of its parent when set to `height: 100%`
<!-- Describe what should happen. -->

## Steps to Reproduce 🕹
Open this link in both chrome and firefox to see the the issue: https://codesandbox.io/s/reverent-kare-iuonx
<!--
  Provide a link to a live example (you can use codesandbox.io) and an unambiguous set of steps to reproduce this bug.
  Include code to reproduce, if relevant (which it most likely is).

  This codesandbox.io template _may_ be a good starting point:
  https://codesandbox.io/s/github/mui-org/material-ui/tree/master/examples/create-react-app

  If you're using typescript a better starting point would be
  https://codesandbox.io/s/github/mui-org/material-ui/tree/master/examples/create-react-app-with-typescript

  If YOU DO NOT take time to provide a codesandbox.io reproduction, should the COMMUNITY take time to help you?
-->


## Your Environment 🌎

<!--
  Include as many relevant details about the environment with which you experienced the bug.
  If you encounter issues with typescript please include version and tsconfig.
-->

| Tech        | Version |
| ----------- | ------- |
| Material-UI | v4.5.1  |
| React       |   16.10.2      |
| Browser     |   Chrome      |



Issue discussion:
@hdstusnick In a flex container, use:
```css
hr {
  align-self: stretch;
  height: auto;
}
```

I don't know how we could internalize this style. Maybe with a `flexItem?: boolean` prop?
Is the below bug is related to this issue? As you can see, the [vertical divider](https://material-ui.com/components/dividers/#vertical-dividers) is not visible (its calculated height is `0`!).

![image](https://user-images.githubusercontent.com/15800189/70055167-3f806400-15ee-11ea-8442-c2aa2ac8e6ba.png)

That's from the [official example](https://codesandbox.io/s/p5xpy) in [documentations](https://material-ui.com/components/dividers/#vertical-dividers):

https://p5xpy.csb.app/

***

I tested it on _Chrome 78.0.3904.108 (Official Build) (64-bit)_ and _Firefox 69.0 (64-bit)_.
@mirismaili Yes, I believe it's exactly the problem we are discussing here. I would propose that we move forward with the `flexItem` prop so people can declare when the parent is a flex container so the divider can use a different strategy to cover the whole screen: https://github.com/mui-org/material-ui/issues/18022#issuecomment-546060009
@mirismaili @oliviertassinari Can I pick it up ?

Solution patch:
diff --git a/docs/pages/api/divider.md b/docs/pages/api/divider.md
--- a/docs/pages/api/divider.md
+++ b/docs/pages/api/divider.md
@@ -27,6 +27,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">absolute</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Absolutely position the element. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'hr'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name">flexItem</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the divider will apply adapt to a parent flex container. |
 | <span class="prop-name">light</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the divider will have a lighter color. |
 | <span class="prop-name">orientation</span> | <span class="prop-type">'horizontal'<br>&#124;&nbsp;'vertical'</span> | <span class="prop-default">'horizontal'</span> | The divider orientation. |
 | <span class="prop-name">variant</span> | <span class="prop-type">'fullWidth'<br>&#124;&nbsp;'inset'<br>&#124;&nbsp;'middle'</span> | <span class="prop-default">'fullWidth'</span> | The variant to use. |
@@ -48,6 +49,7 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">light</span> | <span class="prop-name">.MuiDivider-light</span> | Styles applied to the root element if `light={true}`.
 | <span class="prop-name">middle</span> | <span class="prop-name">.MuiDivider-middle</span> | Styles applied to the root element if `variant="middle"`.
 | <span class="prop-name">vertical</span> | <span class="prop-name">.MuiDivider-vertical</span> | Styles applied to the root element if `orientation="vertical"`.
+| <span class="prop-name">flexItem</span> | <span class="prop-name">.MuiDivider-flexItem</span> | Styles applied to the root element if `flexItem={true}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/src/pages/components/dividers/VerticalDividers.js b/docs/src/pages/components/dividers/VerticalDividers.js
--- a/docs/src/pages/components/dividers/VerticalDividers.js
+++ b/docs/src/pages/components/dividers/VerticalDividers.js
@@ -17,7 +17,7 @@ const useStyles = makeStyles(theme => ({
     backgroundColor: theme.palette.background.paper,
     color: theme.palette.text.secondary,
     '& svg': {
-      margin: theme.spacing(2),
+      margin: theme.spacing(1.5),
     },
     '& hr': {
       margin: theme.spacing(0, 0.5),
@@ -29,14 +29,16 @@ export default function VerticalDividers() {
   const classes = useStyles();
 
   return (
-    <Grid container alignItems="center" className={classes.root}>
-      <FormatAlignLeftIcon />
-      <FormatAlignCenterIcon />
-      <FormatAlignRightIcon />
-      <Divider orientation="vertical" />
-      <FormatBoldIcon />
-      <FormatItalicIcon />
-      <FormatUnderlinedIcon />
-    </Grid>
+    <div>
+      <Grid container alignItems="center" className={classes.root}>
+        <FormatAlignLeftIcon />
+        <FormatAlignCenterIcon />
+        <FormatAlignRightIcon />
+        <Divider orientation="vertical" flexItem />
+        <FormatBoldIcon />
+        <FormatItalicIcon />
+        <FormatUnderlinedIcon />
+      </Grid>
+    </div>
   );
 }
diff --git a/docs/src/pages/components/dividers/VerticalDividers.tsx b/docs/src/pages/components/dividers/VerticalDividers.tsx
--- a/docs/src/pages/components/dividers/VerticalDividers.tsx
+++ b/docs/src/pages/components/dividers/VerticalDividers.tsx
@@ -18,7 +18,7 @@ const useStyles = makeStyles((theme: Theme) =>
       backgroundColor: theme.palette.background.paper,
       color: theme.palette.text.secondary,
       '& svg': {
-        margin: theme.spacing(2),
+        margin: theme.spacing(1.5),
       },
       '& hr': {
         margin: theme.spacing(0, 0.5),
@@ -31,14 +31,16 @@ export default function VerticalDividers() {
   const classes = useStyles();
 
   return (
-    <Grid container alignItems="center" className={classes.root}>
-      <FormatAlignLeftIcon />
-      <FormatAlignCenterIcon />
-      <FormatAlignRightIcon />
-      <Divider orientation="vertical" />
-      <FormatBoldIcon />
-      <FormatItalicIcon />
-      <FormatUnderlinedIcon />
-    </Grid>
+    <div>
+      <Grid container alignItems="center" className={classes.root}>
+        <FormatAlignLeftIcon />
+        <FormatAlignCenterIcon />
+        <FormatAlignRightIcon />
+        <Divider orientation="vertical" flexItem />
+        <FormatBoldIcon />
+        <FormatItalicIcon />
+        <FormatUnderlinedIcon />
+      </Grid>
+    </div>
   );
 }
diff --git a/docs/src/pages/components/dividers/dividers.md b/docs/src/pages/components/dividers/dividers.md
--- a/docs/src/pages/components/dividers/dividers.md
+++ b/docs/src/pages/components/dividers/dividers.md
@@ -36,5 +36,6 @@ The examples below show two ways of achieving this.
 ## Vertical Dividers
 
 You can also render a divider vertically using the `orientation` prop.
+Note the usage of the `flexItem` prop to accommodate for the flex container.
 
 {{"demo": "pages/components/dividers/VerticalDividers.js", "bg": true}}
diff --git a/packages/material-ui/src/Divider/Divider.d.ts b/packages/material-ui/src/Divider/Divider.d.ts
--- a/packages/material-ui/src/Divider/Divider.d.ts
+++ b/packages/material-ui/src/Divider/Divider.d.ts
@@ -3,6 +3,7 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 export interface DividerTypeMap<P = {}, D extends React.ElementType = 'hr'> {
   props: P & {
     absolute?: boolean;
+    flexItem?: boolean;
     light?: boolean;
     orientation?: 'horizontal' | 'vertical';
     variant?: 'fullWidth' | 'inset' | 'middle';
diff --git a/packages/material-ui/src/Divider/Divider.js b/packages/material-ui/src/Divider/Divider.js
--- a/packages/material-ui/src/Divider/Divider.js
+++ b/packages/material-ui/src/Divider/Divider.js
@@ -38,6 +38,11 @@ export const styles = theme => ({
     height: '100%',
     width: 1,
   },
+  /* Styles applied to the root element if `flexItem={true}`. */
+  flexItem: {
+    alignSelf: 'stretch',
+    height: 'auto',
+  },
 });
 
 const Divider = React.forwardRef(function Divider(props, ref) {
@@ -46,6 +51,7 @@ const Divider = React.forwardRef(function Divider(props, ref) {
     classes,
     className,
     component: Component = 'hr',
+    flexItem = false,
     light = false,
     orientation = 'horizontal',
     role = Component !== 'hr' ? 'separator' : undefined,
@@ -60,6 +66,7 @@ const Divider = React.forwardRef(function Divider(props, ref) {
         {
           [classes[variant]]: variant !== 'fullWidth',
           [classes.absolute]: absolute,
+          [classes.flexItem]: flexItem,
           [classes.light]: light,
           [classes.vertical]: orientation === 'vertical',
         },
@@ -91,6 +98,10 @@ Divider.propTypes = {
    * Either a string to use a DOM element or a component.
    */
   component: PropTypes.elementType,
+  /**
+   * If `true`, the divider will apply adapt to a parent flex container.
+   */
+  flexItem: PropTypes.bool,
   /**
    * If `true`, the divider will have a lighter color.
    */


Test patch:
diff --git a/packages/material-ui/src/Divider/Divider.test.js b/packages/material-ui/src/Divider/Divider.test.js
--- a/packages/material-ui/src/Divider/Divider.test.js
+++ b/packages/material-ui/src/Divider/Divider.test.js
@@ -37,6 +37,11 @@ describe('<Divider />', () => {
     assert.strictEqual(wrapper.hasClass(classes.light), true);
   });
 
+  it('should set the flexItem class', () => {
+    const wrapper = shallow(<Divider flexItem />);
+    assert.strictEqual(wrapper.hasClass(classes.flexItem), true);
+  });
+
   describe('prop: variant', () => {
     it('should default to variant="fullWidth"', () => {
       const wrapper = shallow(<Divider />);