A solution with flexbox (working on IE11): (or view on jsfiddle)
<html><style> html, body { height: 100%; /* fix for IE11, not needed for chrome/ff */ margin: 0; /* CSS-reset for chrome */ }</style><body style="display: flex;"><div style="background-color: black; flex: 1; margin: 25px;"></div></body></html>
(The CSS-reset is not necessarily important for the actual problem.)
The important part is flex: 1
(In combination with display: flex
at the parent). Funnily enough, the most plausible explanation I know for how the Flex property works comes from a react-native documentation, so I refer to it anyway:
(...) flex: 1, which tells a component to fill all available space, shared evenly amongst other components with the same parent