Width, Height, max-width and Overflow

Why Size and Overflow Matter: The College Notice Board

Every college has a notice board near the office. It has a fixed size, but the notices do not. Some are one line long (“Holiday on Friday”). Others are a full page about scholarship rules. When too many notices arrive, the office staff pin them on top of each other, and some hang off the edge of the board.

Web pages face the same problem every day. A box has a size, but its content can be anything: a short message, a long paragraph, a giant photo or a URL with no spaces. In this lesson you will learn how to set sizes with width and height, how to make them flexible with min- and max- versions, and what to do with content that does not fit. This is called overflow.

We will build two things students use every day: a college notice board and a chat message bubble, like the ones in your class group chat.

width and height

width and height set the size of an element’s content area. You can use any unit from the CSS Units lesson: px, %, rem or vh. For block elements like <div> and <p>, the default width is “as wide as the parent” and the default height is “as tall as the content”.

That default height is usually what you want. When you fix the height, long content has nowhere to go and spills out of the box, just like the extra notices hanging off the board. A safer choice is min-height: “at least this tall, but grow if needed”.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fixed Height Problem</title>
  <style>
    body { font-family: Arial, sans-serif; }
    .notice {
      width: 260px;
      height: 80px;
      padding: 10px;
      margin-bottom: 30px;
      background-color: #fff9c4;
      border: 1px solid #c8b900;
    }
    .flexible {
      width: 260px;
      min-height: 80px;
      padding: 10px;
      background-color: #dcedc8;
      border: 1px solid #7cb342;
    }
  </style>
</head>
<body>
  <div class="notice">height: 80px. The library will remain closed on Saturday for stock checking. Students must return all books by Friday evening.</div>
  <div class="flexible">min-height: 80px. The library will remain closed on Saturday for stock checking. Students must return all books by Friday evening.</div>
</body>
</html>

min-width, max-width, min-height and max-height

These four properties set limits instead of exact sizes:

max-width for readable text and responsive images

max-width is probably the most useful of the four. Long lines of text are tiring: by the time your eyes reach the end, it is hard to find the start of the next line. A max-width of about 35rem to 40rem keeps lines a comfortable length on a laptop, while still letting the box shrink on a phone. Add margin: 0 auto to centre it.

The same idea makes images safe on phones. A 1200px photo is wider than any phone screen. max-width: 100% means “never wider than your container”, and height: auto keeps the photo’s shape so it does not get squashed.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>max-width</title>
  <style>
    body { font-family: Arial, sans-serif; line-height: 1.6; }
    .wide { background-color: #ffe0b2; padding: 10px; }
    .readable {
      max-width: 36rem;
      margin: 20px auto;
      background-color: #e1f5fe;
      padding: 10px;
    }
    .poster {
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <p class="wide">No max-width: on a wide laptop screen this line becomes very long, and your eyes must travel far to find the start of the next line.</p>
  <div class="readable">
    <p>max-width: 36rem. On a laptop this box stops growing, so lines stay easy to read. On a phone it simply becomes narrower.</p>
    <img class="poster" src="https://picsum.photos/seed/fest/1200/500" alt="College fest poster">
  </div>
</body>
</html>

width plus max-width is a great pair. width: 90%; max-width: 40rem; means: take 90% of the space on a phone, but stop at 40rem on a big screen.

box-sizing: border-box

You met this in the CSS Box Model lesson, but it matters so much for sizing that it is worth a quick reminder. By default (content-box), width sets only the content area. Padding and border are added on top, so a 300px box with 20px padding and a 5px border is really 350px wide. With box-sizing: border-box, the padding and border fit inside the width you set. Compare each box with the red 300px ruler above it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>box-sizing</title>
  <style>
    body { font-family: Arial, sans-serif; }
    .ruler { width: 300px; height: 6px; background-color: #e53935; margin-bottom: 6px; }
    .box {
      width: 300px;
      padding: 20px;
      border: 5px solid #3949ab;
      margin-bottom: 16px;
      background-color: #e8eaf6;
    }
    .content-box { box-sizing: content-box; }
    .border-box  { box-sizing: border-box; }
  </style>
</head>
<body>
  <div class="ruler"></div>
  <div class="box content-box">content-box: 300 + 40 + 10 = 350px wide</div>
  <div class="ruler"></div>
  <div class="box border-box">border-box: exactly 300px wide</div>
</body>
</html>

This is why many developers start every stylesheet with * { box-sizing: border-box; }. With it, width: 100% plus padding never becomes wider than the screen.

overflow: When Content Does Not Fit

When content is bigger than its box, the overflow property decides what happens:

• visible (the default): the content spills outside the box and may cover other things.
• hidden: the extra content is cut off and cannot be seen.
• scroll: scrollbars are always shown, even when there is nothing to scroll.
• auto: scrollbars appear only when the content is too big. This is usually the best choice.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Overflow Values</title>
  <style>
    body { font-family: Arial, sans-serif; }
    .board {
      width: 220px;
      height: 70px;
      padding: 8px;
      margin-bottom: 50px;
      border: 2px solid #6d4c41;
      background-color: #efebe9;
    }
    .visible { overflow: visible; }
    .hidden  { overflow: hidden; }
    .scroll  { overflow: scroll; }
    .auto    { overflow: auto; }
  </style>
</head>
<body>
  <div class="board visible">visible: Mid-semester exams start on Monday. Carry your ID card. Mobile phones are not allowed in the hall.</div>
  <div class="board hidden">hidden: Mid-semester exams start on Monday. Carry your ID card. Mobile phones are not allowed in the hall.</div>
  <div class="board scroll">scroll: Exams start Monday.</div>
  <div class="board auto">auto: Mid-semester exams start on Monday. Carry your ID card. Mobile phones are not allowed in the hall.</div>
</body>
</html>

You can also control each direction separately with overflow-x (left and right) and overflow-y (up and down). For example, overflow-y: auto on a notice list with a max-height creates a box that scrolls up and down when it gets full. Some phones hide scrollbars until you start scrolling, so make it clear that more content is there.

Cutting Long Text with an Ellipsis

Sometimes you want one neat line, like a list of notice titles or chat names, with “...” at the end when the text is too long. This needs three properties together:

1. white-space: nowrap keeps the text on one line.
2. overflow: hidden hides the part that does not fit.
3. text-overflow: ellipsis shows “...” where the text is cut.

The element also needs a width (or a parent that limits its width). The second part of the example uses overflow-x: auto to make a long one-line timetable scroll sideways instead.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ellipsis and overflow-x</title>
  <style>
    body { font-family: Arial, sans-serif; }
    .title {
      width: 240px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 8px;
      border-bottom: 1px solid #cccccc;
    }
    .timetable {
      width: 240px;
      overflow-x: auto;
      white-space: nowrap;
      padding: 8px;
      background-color: #f3e5f5;
    }
  </style>
</head>
<body>
  <p class="title">Annual Sports Day registrations are now open for all departments</p>
  <p class="title">Holiday on Friday</p>
  <div class="timetable">Mon: Physics | Tue: Chemistry | Wed: Maths | Thu: English | Fri: Computer Lab</div>
</body>
</html>

Only cut text that is not essential, or that the user can open to read in full. Never cut an exam date in half.

Long Words and URLs: overflow-wrap

Browsers break lines at spaces. A long URL has no spaces, so it pushes straight out of a chat bubble. overflow-wrap: anywhere allows the browser to break such a long word at any point when there is no other way to fit it. You may also see overflow-wrap: break-word, which works almost the same way and is also fine to use.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Long Words and Links</title>
  <style>
    body { font-family: Arial, sans-serif; }
    .bubble {
      max-width: 220px;
      padding: 10px 14px;
      margin-bottom: 16px;
      border-radius: 14px;
      background-color: #dcf8c6;
    }
    .wrap { overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <div class="bubble">Form link: https://example.com/college/admissions/2026/application-form-final-version</div>
  <div class="bubble wrap">Form link: https://example.com/college/admissions/2026/application-form-final-version</div>
</body>
</html>

Real-Life Example: Notice Board and Class Chat

Here is everything working together. The board is 100% wide but stops at 30rem. The list of notices has a max-height and scrolls with overflow-y: auto when it gets full. Long notice titles end with an ellipsis. Below it, each chat bubble uses width: fit-content, which means “only as wide as my text”. Bubbles are at most 75% wide, at least 4rem wide (so “Ok” does not look like a tiny dot), and break long links neatly.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>College Notice Board</title>
  <style>
    * { box-sizing: border-box; }
    body { font-family: Arial, sans-serif; background-color: #f1f1f1; padding: 16px; }
    .board {
      width: 100%;
      max-width: 30rem;
      margin: 0 auto;
      background-color: #ffffff;
      border: 2px solid #5d4037;
      border-radius: 10px;
      padding: 12px;
    }
    .board h2 { margin-top: 0; }
    .notices {
      max-height: 12rem;
      overflow-y: auto;
    }
    .notice {
      padding: 8px 0;
      border-bottom: 1px solid #eeeeee;
    }
    .notice-title {
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .chat {
      width: 100%;
      max-width: 30rem;
      margin: 16px auto 0;
    }
    .msg {
      width: fit-content;
      max-width: 75%;
      min-width: 4rem;
      padding: 8px 12px;
      margin-bottom: 8px;
      border-radius: 12px;
      background-color: #e3f2fd;
      overflow-wrap: anywhere;
    }
  </style>
</head>
<body>
  <div class="board">
    <h2>Notice Board</h2>
    <div class="notices">
      <div class="notice"><p class="notice-title">Scholarship forms for second year students are available at the office counter</p><p>Submit before 30 June with a copy of your marksheet.</p></div>
      <div class="notice"><p class="notice-title">Guest lecture on careers in data science</p><p>Seminar hall, Thursday, 2 PM.</p></div>
      <div class="notice"><p class="notice-title">Hostel fee due</p><p>Pay at the accounts office or online.</p></div>
      <div class="notice"><p class="notice-title">Annual fest volunteers needed for the decoration, food and stage management teams</p><p>Meet the student council on Monday.</p></div>
    </div>
  </div>
  <div class="chat">
    <div class="msg">Ok</div>
    <div class="msg">Did anyone save the fest form link? It is https://example.com/fest/volunteer-registration-form-2026</div>
  </div>
</body>
</html>

Try these changes, one at a time:

1. Change max-height: 12rem to max-height: none. The board grows to show every notice.
2. Remove white-space: nowrap from .notice-title. The ellipsis stops working and the titles wrap.
3. Remove overflow-wrap: anywhere from .msg and look at the second message.

Common Mistakes (and How to Fix Them)

• A fixed height on a text box. Text spills out when it is longer than expected, or when the screen is narrow. Use min-height, or no height at all.
• Images wider than the phone. A large image creates sideways scrolling on the whole page. Add max-width: 100%; height: auto; to images.
• An ellipsis that does not appear. text-overflow: ellipsis alone does nothing. You need all three: white-space: nowrap, overflow: hidden and text-overflow: ellipsis.
• overflow: hidden hiding important content. It cuts without warning. Prefer auto unless you really want the content clipped.
• width: 100% plus padding is too wide. Add box-sizing: border-box.

Practice Task: Fix the Class Group Chat

This chat box was built for a laptop and breaks on phones. Complete the four TODO steps so that it works everywhere.

• The chat box is 100% wide but never more than 25rem, with padding included in the width
• It keeps its 200px height and scrolls only when needed
• The long group name stays on one line and ends with an ellipsis
• Messages are at most 80% wide, and long links break instead of spilling out

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Class Group Chat</title>
  <style>
    body { font-family: Arial, sans-serif; background-color: #ece5dd; padding: 12px; }
    .chat {
      width: 600px;
      height: 200px;
      background-color: #ffffff;
      padding: 10px;
      /* TODO 1: make the chat 100% wide, max 25rem, include padding in the width */
      /* TODO 2: keep height 200px, but let it scroll only when needed */
    }
    .name {
      width: 150px;
      font-weight: bold;
      /* TODO 3: keep the name on one line and end it with ... */
    }
    .msg {
      padding: 8px 12px;
      margin-bottom: 8px;
      border-radius: 12px;
      background-color: #dcf8c6;
      /* TODO 4: max 80% wide, and break long links */
    }
  </style>
</head>
<body>
  <div class="chat">
    <p class="name">B.Com Second Year Section A Official Group</p>
    <div class="msg">Tomorrow is a holiday!</div>
    <div class="msg">Assignment upload link: https://example.com/assignments/accounts/unit-three-submission</div>
    <div class="msg">Thank you</div>
    <div class="msg">Please submit before Friday night</div>
  </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Class Group Chat</title>
  <style>
    body { font-family: Arial, sans-serif; background-color: #ece5dd; padding: 12px; }
    .chat {
      width: 100%;
      max-width: 25rem;
      box-sizing: border-box;
      height: 200px;
      overflow-y: auto;
      background-color: #ffffff;
      padding: 10px;
    }
    .name {
      width: 150px;
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .msg {
      max-width: 80%;
      overflow-wrap: anywhere;
      padding: 8px 12px;
      margin-bottom: 8px;
      border-radius: 12px;
      background-color: #dcf8c6;
    }
  </style>
</head>
<body>
  <div class="chat">
    <p class="name">B.Com Second Year Section A Official Group</p>
    <div class="msg">Tomorrow is a holiday!</div>
    <div class="msg">Assignment upload link: https://example.com/assignments/accounts/unit-three-submission</div>
    <div class="msg">Thank you</div>
    <div class="msg">Please submit before Friday night</div>
  </div>
</body>
</html>

Key Takeaways

• Let height follow the content. Use min-height when you need a minimum size.
• max-width keeps text readable and, with max-width: 100%; height: auto;, keeps images inside phones.
• box-sizing: border-box makes the width you set the real width.
• overflow can be visible, hidden, scroll or auto. auto is usually best. Use overflow-x and overflow-y for one direction.
• Ellipsis needs white-space: nowrap, overflow: hidden and text-overflow: ellipsis. Long URLs need overflow-wrap: anywhere.