CODEWITHSUNDEEP
htmlcssoverflow
user20917515
user20917515

Reputation: 11

How do I use the overflow property in a grid?

When I try to hide overflow of border-radius of child element in grid, it doesn't work. It does however work with flex.

What I tried so far:

I put overflow: hidden; in the parent element, but nothing happens

body {
  display: grid;
  grid-template-columns: repeat(1, 2fr);
  margin: 10em auto;
  max-width: 40vw;
  min-height: 40vh;
  border: 2px solid;
  border-radius: 20px;
  overflow: hidden;
}

div {
  color: white;
  padding: 10px;
  font-weight: bold;
  text-align: center;
}

div:nth-of-type(1) {
  background-color: red;
}

div:nth-of-type(2) {
  background-color: blue;
}

div:nth-of-type(3) {
  background-color: green;
}
<body>
  <div>Head</div>
  <div>main</div>
  <div>foot</div>
</body>

Upvotes: 1

Views: 75

Answers (1)

jeremy-denis
jeremy-denis

Reputation: 6878

You can be to not use body as parent of your elements like this. Rather, wrap them in another div.

To exclude this "new" parent, you can use the not selector on the div selector you already have

div:not(.parent) {
  color: white;
  padding: 10px;
  font-weight: bold;
  text-align: center;
}


.parent {
  display: grid;
  grid-template-columns: repeat(1, 2fr);
  margin: 10em auto;
  max-width: 40vw;
  min-height: 40vh;
  border: 2px solid;
  border-radius: 20px;
  overflow: hidden;
}

div:not(.parent) {
  color: white;
  padding: 10px;
  font-weight: bold;
  text-align: center;
}

div:nth-of-type(1) {
  background-color: red;
}

div:nth-of-type(2) {
  background-color: blue;
}

div:nth-of-type(3) {
  background-color: green;
}
<div class="parent">
  <div>Head</div>
  <div>main</div>
  <div>foot</div>
</div>

Upvotes: 1

Related Questions