我是CSS新手，正在探索更多關于它的知識。我想要的是一個有兩個部分(并排)的一個側欄和內容部分第二頁。我的要求是，高達950像素的屏幕尺寸，側邊欄應該有400像素，內容部分應該采取剩余的空間。 在內容div內，將有一個在x方向滾動的div，應該容納20個項目，每個項目的高度為250像素，寬度為200像素。

這是我得到的內容div有藍色的邊界，它溢出了整個頁面

*{
            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>

最佳實踐是首先在移動設備上構建頁面。這意味著您將首先設計mobile，然后使用:

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

適用于950像素以上的屏幕。

我也會小心處理的！重要的關鍵詞。這可能會打亂你未來的風格。

我還會添加box-sizing: border-box作為根樣式。

下面你可以找到更新的款式。我注釋掉了我認為不需要的樣式，并為我添加的樣式添加了注釋

* {
        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>