CODEWITHSUNDEEP
reactjsflexbox
Mike K
Mike K

Reputation: 6473

How to set height of one div flex element to be the same as the other?

I have two divs, and I'm trying to ensure that the left child div stretches to 75% of the parent div and the right child div takes up the rest of the space. I've kind of figured that part out, but how can I ensure that the height of the right child div is always the same as the left child div?

CodeSandbox

Here, I want to make the green div the same height as the red div, but no matter what I do, it doesn't change, unless I hardcode the height of the green div, which I don't want to do, because it won't be consistent on all screens.

If I do this, it works:

      <div style={{ display: "flex", justifyContent: "space-around" }}>
        <div style={{ flexBasis: "75%", backgroundColor: "red" }} />
        <div style={{ width: 60, height: 80, backgroundColor: "green" }} />
      </div>

But I need to set the height on the red div, and have the green div adapt to it.

Upvotes: 0

Views: 48

Answers (2)

Muhammad Ali
Muhammad Ali

Reputation: 2648

Instead of using flex, here's the more cleaner solution with css grid:

<style>
  .root {
    display: grid;
    grid-template-columns: 3fr 1fr;
  }
  .a {
    background: red;
    height: 100px;
  }
  .b {
    background: green;
  }
</style>
<div class="root">
  <div class="a">A<br />Z</div>
  <div class="b">B</div>
</div>

Let me know if you want to use flex, I'll edit my answer accordingly.

Upvotes: 0

Dewanshu
Dewanshu

Reputation: 534

set height for parent div

<div className="App">
      <div
        style={{
          display: "flex",
          justifyContent: "space-around"
          height: "60px"
        }}
      >
        <div style={{ flexBasis: "75%", backgroundColor: "red" }} />
        <div style={{ backgroundColor: "green", flexGrow: 1 }} />
      </div>
    </div>

Upvotes: 1

Related Questions