Solution 1 :

Actully the main issue comes from your CSS styles, you should change your map-style.css content to the below codes:

body {
  height: 100%;

#root { /* the root element of ReactJS injection */
  display: flex;
  height: 100%;
  width: 100%;

.Map {
  border: 2px solid red; /* just to show your wrapper */
  flex: 1;

.openlayers-map {
  height: 100% !important;

For more information and codes you can see the sample on my codesandbox example.

Solution 2 :

you can set the position of the map to absolute and set top, bottom, left and right to 0 and z-index something big.

or you can try and set the map display to block and make sure that the div parent is full screen but hard to confirm as I do not see your css and html.

Problem :

My Openlayer map doesn’t want to fit to full screen automatically. Any settings don’t help to deal with this. What can be issue with? Thank you in advance

enter image description here


import React, {Component} from "react";
import "./map-style.css";

import {
} from "react-openlayers";

class OLMap extends Component {
  render() {
    return (
      <div className="Map">
        <Map view={{
          center: [50.62202375, 26.24943584],
          zoom: 2,
          maxZoom: 11,
          minZoom: 1
            <layer.Tile />

export default OLMap;


.Map {
  height: 100%;
  width: 100%;
  right: 0;
  left: 0;


Comment posted by AmerllicA

I forgot to leave an upvote to your question. apologize. hope this motivates you to keep going on Stack Overflow.

Comment posted by

now this is what actually I see now after .css file modification

Comment posted by codesandbox

@RobertGurjiev, why you send a picture for me? you should upload a reproduction of your issue to

Comment posted by this link

Dear @RobertGurjiev, please see

Comment posted by Robert Gurjiev

Dear @AmerllicA, thank you so much! it relly helped me!

Comment posted by Robert Gurjiev

i have no idea but when tryed your code 20 minutes before nothing worked

Comment posted by this answer

The answer is simple. the main issue comes from the PO’s knowledge about CSS. see