Check out this fiddle: https://jsfiddle.net/8dvhx0ap/1/

Or here the HTML:

.sidenav {
  height: 100%;
  width: 160px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: black;
  display: flex;
}

.smallDiv {
  background-color: green;
  padding: 10px;
}

.bigDiv {
  background-color: blue;
  padding: 10px;
  width: 60vw;
  height: 60vh;
}

.main {
  margin-left: 160px;
  flex: 1 1 auto;
}

.container {
  width: 100%;
  display: block;
  box-sizing: border-box;
  padding: 20px;
}

.grid {
  justify-content: center !important;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

<div id="app">
  <div style="height: 50px; background-color: red;"></div>
  <aside ></aside>
  <div >
    <div >
      <div >
        <div >
          <input type="text"><br><br>
          <input type="text"><br><br>
          <input type="text"><br><br>
          <input type="text"><br><br>
          <input type="text"><br><br>
        </div>
        <div >

        </div>
      </div>
    </div>
  </div>
</div>

I want the blue div to fill the empty space. On a normal screen, the green div should be on the left, and the big right space should be filled entirely by the blue div (use the space to the right and bottom but without scrollbars). Changing the page size would result in the blue div getting bigger / smaller. If the screen becomes too small (e.g. I use a phone), the 2 divs should be below each other (like currently).

How can I make the blue div fill the space?

CodePudding user response：

1. In .bigDiv use: width:100vw; and height:100vh;
2. Remove flex-wrap in .grid
3. Insert flex-direction: row; in .grid
4. Remove the padding in .container

There are probably many other things not needed in your CSS, for example, you can probably remove justify-content, but I am not sure what you want to exactly achieve.

You need to use media queries to target different screen sizes.

Here's your code with those changes:

.sidenav {
  height: 100%;
  width: 160px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: black;
  display: flex;
}

.smallDiv{
    background-color: green;
    padding: 10px;
}

.bigDiv{
    background-color: blue;
    padding: 10px;
    width: 100vw;
    height: 100vh;
}

.main{
    margin-left: 160px;
    flex: 1 1 auto;
}

.container{
    width: 100%;
    display: block;
    box-sizing: border-box;
}

.grid{
    justify-content: center !important;
    width: 100%;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
}

@media only screen and (max-width: 600px) {
.grid {
    flex-direction: column;
    }
}

CodePudding user response：

I noticed that the top red div was actually partially hidden by the black sidenav div. So, this meant that the HTML needed to be restructed. Adding content makes it possible to see how it should behave.

You probably also want the black sidenav div to disappear on mobiles, and that can be achieved with a suitable media query.

        .container {
            display: flex;
            flex-direction: row;
        }
        
        .main {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .sidenav {
            flex-basis: 160px;
            flex-shrink: 0;
            color: white;
            background-color: black;
            display: flex;
        }
        
        .topDiv {
            flex-grow: 1;
            height: 60px;
            background-color: red;
        }
        
        .grid {
            display: flex;
            flex-direction: row;
        }
        
        .smallDiv {
            background-color: green;
            padding: 10px;
        }
        
        .bigDiv {
            background-color: blue;
        }
        
        @media only screen and (max-width: 600px) {
            .grid {
                flex-direction: column;
            }
        }

    <div >
        <aside >Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel facilis alias incidunt aperiam sequi a earum delectus nam similique nostrum, tenetur esse aliquid veritatis dicta tempore? Error asperiores tempore illo!</aside>
        <div >
            <div >
                <h1>A Heading</h1>
            </div>
            <div >
                <div >
                    <input type="text"><br><br>
                    <input type="text"><br><br>
                    <input type="text"><br><br>
                    <input type="text"><br><br>
                    <input type="text"><br><br>
                </div>
                <div >
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet ab doloribus nostrum deleniti debitis, et odit tempora obcaecati perferendis dolorum ratione asperiores odio ipsum. Sequi consequatur qui nisi quibusdam praesentium!
                </div>
            </div>
        </div>
    </div>