DEV Community

Cover image for Lake Tahoe site focus with Box Model css
Heggy Castaneda
Heggy Castaneda

Posted on • Updated on

Lake Tahoe site focus with Box Model css

Lake Tahoe site focus on Box Model DEMO

When setting max-height or min-height to the each paragraph containers, the content may spill over.

overflow content

To render content properly, we set main contents' container overflow property to scroll. All children of that container displays overflowing content with a scroll bar!

// parent
#main {
  // set height to limit the expansion of content
  height: 1000px;
  overflow: scroll;
}

// child
p {
  min-width: 200px;
  max-width: 800px;
  min-height: 200px;
  max-height: 300px;
}

When we hide an element from screen, to maintain the layout we use display: hidden otherwise, we use display: none.
However, both are not accessible for screen reader.

Top comments (0)