I am trying to create a reusable horizontal component, it works fine with horizontal cases, but when trying on vertical I am not getting the expected result.

style.css

.horizontal-rule {
  height: 1px;
  background: grey;
  border: none;
  flex-shrink: 0;
  margin: 0;
}

.vertical {
  width: 1px;
  margin: 0 1rem;
  height: 100%;
}

even though I am adding the .vertical class its not reflecting, so I need to especially pass the these inline styles to make working

 style={{ height: "48px", border: "solid 1px" }}

How can I avoid this inline style and make it as a reusable one which will work for vertical cases with height automatically between the content

Codesandbox

CodePudding user response：

In your code, you have to set the height of parents tag(.inner-div) of the .vertical.

After that, height: 100% in .vertical will work as you've intended.

.inner-div { height: 48px; }

CodePudding user response：

You either have to set a height for the parent of the divider, or give a defined height to the divider, the height: 100% does not work when the parent doesn't have a defined height with the em, rem, and px;