Kevin Powell - Community•12mo ago

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.

5 Replies

cheemsOP•12mo ago

I have achieved the visible difference in height and min-height, though i cannot manage it with min-width

MarkBoots•12mo ago

the default width of a block element (such as a div) is already 100% of the available width of the parent / viewport. content that is to large, will overflow. If you want the element to be as large as the content, you could use width: fit-content. if you don't want the content to overflow, you can set overflow: hidden

clevermissfox•12mo ago

Overflow-x: clip; is the new overflow: hidden; it allows you to work with overflow-y how you want to and eventually there will be an overflow-clip-margin as well!!

MarkBoots•12mo ago

or that yes, there are several options depending on what you want/need

clevermissfox•12mo ago

To be clear it’s overflow: clip is the new overflow: hidden so as not to confuse anyone. Then overflow-x: clip is the new overflow-x: hidden. I’m such a nerd, so excited about all the new css properties and tools! Container?! View-Transitions ?! Overflow-clip-margin?! Newly supported colour spaces?! Bring it !

Gaming

Programming

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