Flexbox within Flexbox & Stacking Elements

Question

I'm trying to make a card that's:

Split into two unequal columns of the same height (80%/20%)
In the right column, split into two (or more) rows

So something like:

What's happening is that I'm getting lots of whitespace around the two right boxes. I had tried adjusting the <p> tags' margins to 0, but then the entire column height becomes unequal with the left larger column. Anyone know how to accomplish this?

.cardWrap {
    box-sizing: border-box;
    max-width: 1024px;
    border: 2px solid #e5bc73;
}

.cardContent {
    display: flex;
    width: 100%;
    box-sizing: border-box;
}

.left {
    flex: 0 1 80%;
    flex-direction: column;
    padding: 15px;
}

.right {
    flex: 0 1 20%;
    flex-direction: row;
}

.gold {
    background-color: #e5bc73;
}

.black {
    background-color: #000;
    color: #fff;
}

<div class="cardWrap">
    <div class="cardContent">
        <div class="left">
            <h4>Header</h4>
            <p>Some text</p>
        </div>
        <div class="right">
            <div class="gold">
                <p>Baaaah</p>
                <p>Baaaah</p>
                <p>Baaaah</p>
                <p>Baaaah</p>
                <p>Baaaah</p>
            </div>
            <div class="black">
                <p>Moo</p>
            </div>
        </div>
    </div>
</div>

have a look at my re-edit and let me know if you still have any trouble — ShrewdStyle, Mar 30 '20 at 19:21

score 1 · Answer 1 · answered Mar 30 '20 at 19:00

Applying margin: 0 on all the <p> tags should be enough to get the desired result;

p {
  margin: 0;
}
.cardWrap {
    box-sizing: border-box;
    max-width: 1024px;
    border: 2px solid #e5bc73;
}

.cardContent {
    display: flex;
    width: 100%;
    box-sizing: border-box;
}

.left {
    flex: 0 1 80%;
    flex-direction: column;
    padding: 15px;
}

.right {
    flex: 0 1 20%;
    flex-direction: row;
}

.gold {
    background-color: #e5bc73;
}

.black {
    background-color: #000;
    color: #fff;
}

<div class="cardWrap">
    <div class="cardContent">
        <div class="left">
            <h4>Header</h4>
            <p>Some text</p>
        </div>
        <div class="right">
            <div class="gold">
                <p>Baaaah</p>
                <p>Baaaah</p>
                <p>Baaaah</p>
                <p>Baaaah</p>
                <p>Baaaah</p>
            </div>
            <div class="black">
                <p>Moo</p>
            </div>
        </div>
    </div>
</div>

Thanks, but when I do this the two columns are no longer equal right — DD1229, Mar 30 '20 at 19:11

ShrewdStyle · Answer 2 · 2020-03-30T19:20:24.473

re-edit v2.

<div class="cardWrap">
      <div class="left">
        <h4>Header</h4>
        <p>Some text</p>
      </div>
      <div class="right">
        <div class="gold">
          <p>Baaaah</p>
          <p>Baaaah</p>
          <p>Baaaah</p>
          <p>Baaaah</p>
          <p>Baaaah</p>
        </div>
        <div class="black">
          <p>Moo</p>
        </div>
      </div>
    </div>

* {
  padding: 0;
  margin: 0;
}
.cardWrap {
  display: flex;
  box-sizing: border-box;
  max-width: 1024px;
  border: 2px solid #e5bc73;
  height: 500px;
}

.left {
  flex: 80%;
  flex-direction: column;
  padding: 15px;
}

.right {
  flex: 20%;
  flex-direction: row;
}

.gold {
  background-color: #e5bc73;
  height: 70%;
}

.black {
  background-color: #000;
  color: #fff;
  height: 30%;
}

You had a container doing nothing so i have removed it for you to make it easier for you to understand, hope this helps

yeah that's ok just add a height: property in the parent div and they will resize — ShrewdStyle, Mar 30 '20 at 19:14
i will re edit my comment for a cleaner version for you so you can see — ShrewdStyle, Mar 30 '20 at 19:19

Flexbox within Flexbox & Stacking Elements

2 Answers2