Why divs overflow their flexbox

Question

Question title rule is infuriating so my question title is nonsense to get past the gatekeeping. I decided to convert standard code to flexbox and ran into a problem. I need the linear gradient on top of my divs (except for one) and the gradient conforms to the size I want. The underlying div doesn't, however. It flows out beyond the gradient. Also, how to center just one line of text in a flexbox while keeping the rest centered but left-justified? My code is forced to be sandboxed which is why everything is embedded. Here's my code. Thanks for any help offered.

<style TYPE="text/css">
      body {
          background-color: BLACK;
          background: url('https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_KSExlbMQsT842613856.jpg') repeat;
          color: MEDIUMPURPLE;
     }

     #container {
       display: flex;
          flex-flow: column nowrap;
          justify-content: flex-start;
          align-content: center;
          align-items: center;
    padding: 10px;
     }

     #header {
       display: flex;
          align-items: center;
    min-width: 100%;
     }

     #description {
       display: flex;
          align-items: center;
    flex: 0 1 auto;
    align-self: auto;
    min-width: 100%;
     }

     #preview {
       display: flex;
     }

    #footer {
       display: flex;
          align-items: center;
    min-width: 100%;
     }

     #description, #footer {
          padding: 20px;
    }

    .pageshine {
       display: flex;
    min-width: 100%;

          margin: 20px;
          border-color: rgba(0, 0, 0, 0.6);
    border-image: none;
          border-width: 1px;
    border-style: solid;

          box-shadow:
               0 1px 0 0 rgba(255, 255, 255, 0.4) inset,
               0 2px 6px rgba(0, 0, 0, 0.5),
               0 10px rgba(0, 0, 0, 0.05) inset;

          -moz-border-radius: 2px;
          -webkit-border-radius: 2px;
          border-radius: 2px;

          background: linear-gradient(to bottom,rgba(96,103,104,0.3) 0%,rgba(187,187,187,0.3) 3%,rgba(187,187,187,0.3) 27%,rgba(0,0,0,0.3) 28%,rgba(0,0,0,0.3) 60%,rgba(0,0,0,0.3) 73%,rgba(75,80,81,0.3) 88%,rgba(0,0,0,0.3) 97%,rgba(0,0,0,0.3) 100%);
     }

    .border {
          z-index: -1;
          border: 10px solid #6b36ba;
          border-image: url('https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_pa75I1OyXe388988805.jpg') 30 round;
     }
</style>

<div id="container">
     <div class="pageshine">
          <div id="header" class="border">
               <img src='https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_9cGq7M7RLK201862878.gif' alt='[Spinning Logo]'>
               [Hard Candy by IshikaruTanaka - Banner code] 
          </div>
     </div>

     <div class="pageshine">
          <div id="description" class="border">
               Description of product.<br><br>
               BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br>
      BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH  <br>
      BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br>
      BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH  <br>
      BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br>
      BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH  <br>
      BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br>
          </div>
     </div>

     <div id="preview" class="border">
          <img src='https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_53jHmHNVph2021877487.png' alt='[Product Preview Image]'>
     </div>

     <div class="pageshine">
         <div id="footer" class="border">
               <img src='' alt='[Footer Banner]'>[More Hard Candy products by IshikaruTanaka - code]

          </div>
     </div>
</div>

score 0 · Answer 1 · answered Apr 27 '20 at 08:55

I'm not sure to understand your first problem.

In order to "centre just one line of text in a flexbox", here is a trick that should work:

<!DOCTYPE html>
<!-- example of use of the three.js library built upon webGL -->
<html>

<head> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>Test with flexbox</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>

<body>
    <div class="main_container">
        <div class="div_in_flexbox">
            <p>Hello</p>
            <p class="centered_text">World</p>
        </div>
    </div>

    <script src="./main.js"></script>
</body>

</html>

.main_container {
    display: flex;
    width: 100%;
    height: 200px;
    background-color: aquamarine;
    justify-content: center;
}

.div_in_flexbox {
    display: flex;
    text-align: left justify;
    width: 300px;
    height: 160px;
    background-color: beige;
    margin: 20px;
}

.centered_text {
    position: relative;
    display: inline-block;
    margin: auto;
    width: auto;
}

You will get something like this (capture):

Adding your code to the code I already have doesn't work. It only works in your bare bones code. Thanks anyway though. — Hideto, Apr 27 '20 at 09:04
This is because you probably have other rules that mess up with the CSS. I suggest that you try to rebuild this feature on a fresh project to try. — Onyr, Apr 27 '20 at 09:15
Thanks anyhow. I appreciate the help. I need the rest of my problem dealt with before I can deal with this one so I'll get to this part later. — Hideto, Apr 27 '20 at 09:17

Why divs overflow their flexbox

1 Answers1