Display Flex causing parent div to expand

Question

I am new to CSS and exploring more about it. What I want is a page having two divs (side by side) one for the Side Bar and second for Content Part. My requirement is that upto 950 px of screen size the sidebar should have 400px and content part should take the remaining space. Inside the content div there will be a div having scroll in x direction and should hold 20 items each of height 250px and width 200px.

This is what i got the content div has blue border and it overflows the entire page

        *{
            padding: 0;
            margin:0
        }
        .container {
            width:100vw;
            height: 100vh;
            background-color: black;
            padding:20px;
            box-sizing: border-box;
            display:flex; 
            overflow: hidden;
        }

        .sidebar {
            width: 400px !important;
            height:100%;
            border:1px solid red;
            box-sizing: border-box;
            flex-shrink: 0;

        }

        .content{
            height:100%; 
            border:1px solid blue;  
            width:calc(100%);
            flex-shrink: 3;
        }

        .holder{
            height:40%;
            width:100%;
            border:1px solid yellow;
            display:flex;
            overflow: scroll;
        }

        .item{
            height:250px;
            width:200px;
            border:1px solid pink;
            flex-shrink: 0 ;
        }

    <div class="container">
        <div class="sidebar">

        </div>

        <div class="content">
            <div class="holder">
                <!-- This will hold around 15 to 20 items -->
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
        </div>
    </div>

Answer 1

The best practice is to build pages mobile-first. Which means you will style mobile first and then use:

@media screen and (min-width: 950px) {
`enter code here`
}

for screens wider than 950px.

I would also be careful with !important keyword. It might mess up your styles in the future.

I would also add box-sizing: border-box as a root style.

Below you can find updated styles. I commented out styles I believe are not needed and added comment for styles I have added

 * {
        padding: 0;
        margin: 0;
        box-sizing: border-box; /* added */
      }
      .container {
            width:100vw;
            height: 100vh;
            background-color: black;
            padding:20px;
            /* box-sizing: border-box; */
            display:flex; 
            /* overflow: hidden; */
        }

        .sidebar {
            /* width: 400px !important; */
            min-width: 400px; /* added */
            height:100%;
            border:1px solid red;
            /* box-sizing: border-box; */
            /* flex-shrink: 0; */
        }

        .content{
            height:100%; 
            border:1px solid blue;  
            /* width:calc(100%); */
            /* flex-shrink: 3; */
            overflow: hidden; /* added */
        }

        .holder{
            /* height:40%; */
            width:100%;
            border:1px solid yellow;
            display:flex;
            /* overflow: scroll; */
            overflow-x: scroll;/* added */
            overflow-y: hidden;/* added */
        }

        .item{
            height:250px;
            width:200px;
            border:1px solid pink;
            flex-shrink: 0 ;
        }

<div class="container">
      <div class="sidebar"></div>

      <div class="content">
        <div class="holder">
          <!-- This will hold around 15 to 20 items -->
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
        </div>
      </div>
    </div>