0

I know there are a million things on stack overflow like this question I'm asking but none of them have been able to help me. I tried following this answer but it didn't work for me. I just need my second row to fill in the rest of #pink-banner div

HTML

<body>
<div id="pink-banner" class="d-flex flex-column">

    <div class="row shadow mb-0 pb-4 bg-light rounded-bottom header">
        <h1 class="text-center mb-0 title">Test</h1>
    </div>

    <div class="row flex-grow-1">
        <div class="broken-div"></div>
    </div>

</div>
</body>

CSS

body {
height: 100%;
width: 100%;
position: absolute;
}

#pink-banner {
    width: 100%;
    height: 90%;
    background-color: #F08080;
}

.broken-div {
  border: solid blue 10px;
}

.header {
    display: flex;
    justify-content: center;
}

This code produces this:

enter image description here

I need that blue border to fill the entire pink area. Width and height. Anyone got any ideas?

Dallin Davis
  • 421
  • 7
  • 18

2 Answers2

0

Try this

body {
  height: 100%;
  width: 100%;
  position: absolute;
}

#pink-banner {
  width: 100%;
  height: 90%;
  background-color: #F08080;
}

.broken-div {
  border: solid blue 10px;
}

.header {
  display: flex;
  justify-content: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div id="pink-banner" class="d-flex flex-column">

    <div class="row shadow mb-0 pb-4 bg-light rounded-bottom header">
        <h1 class="text-center mb-0 title">Test</h1>
    </div>

    <div class="broken-div"></div>

</div>
</body>
Grampet
  • 177
  • 1
  • 1
  • 8
0

It looks like you're missing the flex properties. Here's a revised version of your code:

#pink-banner {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #F08080;
}

.header {
  display: flex;
  justify-content: center;
}

.flex-grow-1 {
  flex: 1;
  border: solid blue 10px;
}

body {
  margin: 0;
}
<div id="pink-banner" class="flex-column">

  <div class="row shadow mb-0 pb-4 bg-light rounded-bottom header">
    <h1 class="text-center mb-0 title">Test</h1>
  </div>

  <div class="row flex-grow-1">
    <div class="broken-div"></div>
  </div>

</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • I forgot to mention that I am using bootstrap so I'm getting those classes from a cdn. However your code made me realize that I needed to add `d-flex` to `#pink-banner`. Now when I use chrome tools I can see that the div is covering the correct area but the border is still hugging the left side. – Dallin Davis Jun 07 '20 at 01:53
  • Yeah, I saw the Bootstrap classes and noticed the CDN was omitted in the question. Still, I tried to show the problem. If you're still having trouble, put the full code in the Q, or a jsFiddle / codepen here. – Michael Benjamin Jun 07 '20 at 01:58
  • Here is the JS Fiddle https://jsfiddle.net/davdarobis/b2d7g8na/ – Dallin Davis Jun 07 '20 at 21:54