Div is not taking its height-CodePudding

Basically I want to have two classes of div representing a cup. There is one big cup and a bunch of small cups. But my problem is that the div is not taking the height I gave it. Since I want to size down the smaller cups I do not want to use min-height for .cup {} in CSS.

Here is my html and css:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PK0gIY59xJ8Co8 NEgFZ L0AZKjy KY8iq0G4B3CyeY&wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9 fkDaog==" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Drink Water</title>
</head>
<body>
    <h1>Drink Water</h1>
    
    <h3>Goal: 2 Liters</h3>

    <div >
        <div  id="remained">
            <span id="'Liters">1.5L</span>
            <small>Remained</small>
        </div>

        <div  id="percentage">
            20%
        </div>
    </div>

    <p >
        Select how many glasses of water tat you have drank.
    </p>

    <div >
        250 ml
    </div>
    <div >
        250 ml
    </div>
    <div >
        250 ml
    </div>
    <div >
        250 ml
    </div>
    <div >
        250 ml
    </div>
    <div >
        250 ml
    </div>
    <div >
        250 ml
    </div>
    <div >
        250 ml
    </div>


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

CSS:

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap');

:root {
    --border-color: #144fc6;
}

* {
    box-sizing: border-box;
}

body {
    background-color: #3494e4;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    margin-bottom: 40px;
}

h1 {
    margin: 10px 0 0;
}

h3 {
    font-weight: 400px;
    margin: 10px 0;
}

.cup {
    background-color: #fff;
    border: 4px solid var(--border-color);
    color: var(--border-color);
    border-radius: 0 0 40px 40px;
    height: 330px;
    width: 150px;
    margin: 30px 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cup.cup-small {
    width: 50px;
    height: 95px;
}

Any idea why the container just takes some kind of min height instead of the one I gave it? Thanks a lot for your help!

CodePudding user response：

So what helped was to wrap an additional div around all the small-cup divs and put its atrribute display to flex. Still I am wondering why it did the job and why it did not work before. Because it even changed the height of the first div that represents the big one and which is not wrapped by the div I added. I hope that makes sence.

CodePudding user response：

Remove display flex from body tag. If you explain what you need exactly, I can help you

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap');
:root {
  --border-color: #144fc6;
}

* {
  box-sizing: border-box;
}

body {
  background-color: #3494e4;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  height: 100vh;
  margin-bottom: 40px;
}

h1 {
  margin: 10px 0 0;
}

h3 {
  font-weight: 400px;
  margin: 10px 0;
}

.container {
  display: flex;
  column-gap: 10px;
  justify-content:center;

}

.cup {
  background-color: #fff;
  border: 4px solid var(--border-color);
  color: var(--border-color);
  border-radius: 0 0 40px 40px;
  height: 330px;
  width: 150px;
  margin: 30px 0;
  overflow: hidden;
}

.cup.cup-small {
  width: 50px;
  height: 95px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PK0gIY59xJ8Co8 NEgFZ L0AZKjy KY8iq0G4B3CyeY&wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9 fkDaog==" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
  <title>Drink Water</title>
</head>

<body>
  <h1>Drink Water</h1>

  <h3>Goal: 2 Liters</h3>
  <div >
    <div >
      <div  id="remained">
        <span id="'Liters">1.5L</span>
        <small>Remained</small>
      </div>
    </div>
    <div  id="percentage">
      20%
    </div>
  </div>

  <p >
    Select how many glasses of water tat you have drank.
  </p>

  <div >
    <div >
      250 ml
    </div>
    <div >
      250 ml
    </div>
    <div >
      250 ml
    </div>
    <div >
      250 ml
    </div>
    <div >
      250 ml
    </div>
    <div >
      250 ml
    </div>
    <div >
      250 ml
    </div>
    <div >
      250 ml
    </div>

  </div>

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

</html>

CodePudding user response：

You have a Hieght in your body css. Now remember, body is in a way superior, so the properties of body is being used.