How to prevent content from spilling out of div? Or have contents shrink size of div

HTML code

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@600&family=Montserrat&display=swap">
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <title>Doc</title>
</head>
<header><h1>JRE</h1></header>
<body>
    <div class="container">
        <div class="box box_e">
            <h2>Joe Rogan</h2>
                <p>Lorem ipsum.</p>
                     <img class="img" src="img/joe rogan.jpg">
            <a class="button" href="">RJ</a>
        </div>
        <div class="box box_e">
            <h2>Joe Rogan</h2>
                <p>Lorem ipsum.</p>
                    <img class="img" src="img/joe_rogan_highdef_bg.jpg">
            <a class="button" href="">R</a>
        </div>
        <div class="box box_e">
            <h2>JR</h2>
                <p>Lorem ipsum!</p>
                    <img class="img" src="img/surprised_rogan.jpg">
            <a class="button" href="">RJ</a>
        </div>
    </div>
</body>
</html>

SCSS code

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 62.5%;
}

h1 {
  text-align: center;
  background-color: #2d2b3c;
  margin: 0;
  padding: 5vh;
  font-family: Comfortaa;
  font-size: 5vh;
  color: #dfdfdf;
}

h2 {
  text-align: center;
  margin: 0;
  padding: 0;
  font-family: Poppins;
  color: #fff;
  font-size: 3em;
}

.container {
  height: 100%;
  width: 100%;
  background-color: #242424;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.img {
  display: flex;
  margin: 1rem auto;
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.box {
  //   display: flex;
  //   flex-direction: column;
  //   flex-basis: 0;
  height: 25%;
  width: 75%;
  min-width: 0;
  padding: 1em;
  margin: 5px;
  font-size: 3em;
  text-align: center;
  color: #dfdfdf;
  font-family: Montserrat;
  background-color: #ff0000;
  overflow: auto;
}

.box_e {
  height: auto;
}

a:hover {
  color: #ff0000;
}
.button {
  background-color: #242424;
  color: #fff;
  padding: 8px 15px;
  margin: 0;
}

Already tried using overflow, but I don't want to have the scroll bars. I remember seeing a way to have the flex children transform to the size of content inside of the divs. The code editor I use is VS Code. Took out large amounts of text like the paragraph and h tags just because it seemed unnecessary. This is the first html project I've ever done so this might be a little cluttered.



Read more here: https://stackoverflow.com/questions/64409702/how-to-prevent-content-from-spilling-out-of-div-or-have-contents-shrink-size-of

Content Attribution

This content was originally published by schmuck at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: