cheems Posts - Answer Overflow

cheems

•Created by cheems on 12/22/2023 in #front-end

Cannot achieve difference between width: 100vw and min-width: 100vw

I made two div containers and gave them width: 100vw and min-width: 100vw respectively. Now I set some nowrap text inside them. According to my understanding, min-width:100vw cannot have less than 100% of the viewport width but it can expand to accommodate the content inside it, but in the code I created, my text just overflows outside the container, why is that? If my technique is wrong, what could be the right way to demonstrate the difference between them and which one I should use as a beginner? Code I created is as follows :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .example-width {
      width: 100vw;
      height: 25vh;
      background-color: lightgreen;
      border: 5px double black;
      margin-bottom: 20px;
    }

    .example-min-width {
      min-width: 100vw;
      height: 25vh;
      background-color: lightblue;
      border: 5px double black;
      margin-bottom: 20px;
    }

    .content {
      white-space: nowrap; /* Prevent text from wrapping */
      padding: 20px; /* Add padding for better visualization */
    }
  </style>
  <title>Width vs. Min-Width Example</title>
</head>
<body>
  <div class="example-width">
    <div class="content">
      This is an example with width: 100vw; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque repellat eum vero sint accusamus qui pariatur
    </div>
  </div>

  <div class="example-min-width">
    <div class="content">
      This is an example with min-width: 100vw; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam earum debitis tempore et sed saepe ullam error odio accusantium provident
    </div>
  </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .example-width {
      width: 100vw;
      height: 25vh;
      background-color: lightgreen;
      border: 5px double black;
      margin-bottom: 20px;
    }

    .example-min-width {
      min-width: 100vw;
      height: 25vh;
      background-color: lightblue;
      border: 5px double black;
      margin-bottom: 20px;
    }

    .content {
      white-space: nowrap; /* Prevent text from wrapping */
      padding: 20px; /* Add padding for better visualization */
    }
  </style>
  <title>Width vs. Min-Width Example</title>
</head>
<body>
  <div class="example-width">
    <div class="content">
      This is an example with width: 100vw; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque repellat eum vero sint accusamus qui pariatur
    </div>
  </div>

  <div class="example-min-width">
    <div class="content">
      This is an example with min-width: 100vw; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam earum debitis tempore et sed saepe ullam error odio accusantium provident
    </div>
  </div>
</body>
</html>

THANK YOU.

6 replies

Gaming

Programming