How to make child element full width 100% when an parent element already have width 75%?

Are there a trick to make the child element to be an exception to not follow the width from the parent 75%?

6 Replies

Koicha•2y ago

Example the current code is:

.parent {
  display: block;
  width: 100%;
  max-width: 75;
}

.parent > .child {
 /* need to make the child elemnt to have width 100vw! */
}

.parent {
  display: block;
  width: 100%;
  max-width: 75;
}

.parent > .child {
 /* need to make the child elemnt to have width 100vw! */
}

hmm, I think I actually found a solution! It's setting the:

.child {
  min-width: 100vw;
}

.child {
  min-width: 100vw;
}

13eck•2y ago

Block-level children will be as wide as their parent without outside interference (like grid or flex). But note that percentages are based on a percent of the parent and not the viewport. Also, you have a max-width: 75 with no unit type, just 75 😉

Koicha•2y ago

oh yeah sorry about that, I mean't 75% hmm, my solution didn't work Are there any CSS trick to make this an exception?

MarkBoots•2y ago

in this option you only have to change the --w for the parent, the child will adjust to that

MarkBoots•2y ago

but i think it is easier to try and see if you can adjust your layout setup

Koicha•2y ago

this is perfect solution! Thank you @MarkBoots !

Gaming

Programming

How to make child element full width 100% when an parent element already have width 75%?