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
  • 636
  • 4
  • 8
dev
  • 665
  • 5
  • 19
  • 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

2 Answers2

0

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;

DRA
  • 146
  • 6
  • Since its in a flex container shouldn't it work – dev Nov 24 '21 at 14:44
  • @dev The hr has a margin, that by using flex-box, it includes it to how to align the items, the hr is empty, and doesn't have any height or width, so the flex forces it in the center because of those margins, you have set the margin: 0, which is the only style you need for the vertical divider with flex. – DRA Nov 24 '21 at 15:36
  • Look at [Why does flex give hr element width of 0?](https://stackoverflow.com/questions/50184608/why-does-flex-give-hr-element-width-of-0) – DRA Nov 24 '21 at 15:56
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
  • 161
  • 7
  • 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