Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Is It Possible To Use The `resize` Css Property On The Html `body` Element?

Post a Comment
My website has a fixed max-width which I would like to improve upon by also enabling the user with a draggable border on the sides, so she could read on whatever width she desires.

Solution 1:

You need to set overflow to html to disable the overflow propagation:

body {
  /* Preparation of the example design */padding-left: 20px;
  padding-right: 20px;
  max-width: 90vw;

  /* Resize Properties */resize: both;
  overflow: hidden; /* this depends on what you want to experiment with */border: 1px solid green;
}

html {
  overflow: auto; /* anything different from visible */
}
<html><body><p>This is a very long text
 al;djf;alskdjf;laskdjf;asldkjf;alsdkjfl;asdjf;lasdkjf;lasdjf;lasjdfl;asjdl;fajsdl;fja;ldfjl;jadf</p></body></html>

UAs must apply the overflow-* values set on the root element to the viewport. However, when the root element is an [HTML] html element (including XML syntax for HTML) whose overflow value is visible (in both axes), and that element has a body element as a child, user agents must instead apply the overflow-* values of the first such child element to the viewport. The element from which the value is propagated must then have a used overflow value of visible.

Post a Comment for "Is It Possible To Use The `resize` Css Property On The Html `body` Element?"