0

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 it's not reflecting, so I need to especially pass these inline styles to make working

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

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

Codesandbox

Priyanka Vadhwani
  • 991
  • 7
  • 10
dev
  • 814
  • 10
  • 27
  • I misunderstood your question. Does using min-height for the divider instead of height solve your problem? height:100% is tricky specifically when the container does not have a defined height. If you set a height on its parent you would see it works. – DRA Nov 24 '21 at 11:27

1 Answers1

0

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; }
Amoong
  • 171
  • 8
  • I don't want to give any height, I have read that inside a flex whatever the content height is it should work – dev Nov 24 '21 at 14:43