這是我的問題，我的目標是有一個響應的布局，一個搜索欄和5個不同高度的容器，我想有%的高度來保持響應，如果文本比它必須的要多得多，我們必須添加軸是y和x的滾動，對我來說，這不起作用，你知道是什么問題嗎

這是我的html代碼:

.green {
  background-color: white;
  margin: 1%;
  max-width: 98%;
  max-height: 45%;
}

.block1 {
  background-color: white;
  margin: 2%;
  height: 5%;
  // overflow-y: scroll;
  //max-width:70%;
}

.block2 {
  background-color: white;
  margin: 2%;
  // max-height: 45%;
}

Title {
  font-size: 27px;
  font-family: 'fontLufga';
  margin: 1%;
  font-weight: 600;
}

.view-home--searchInput {
  background-image: url(/assets/searchIcon.png);
  background-repeat: no-repeat;
  background-position: 5px center;
  padding-left: 3%;
  /* Adjust this value based on your image size */
  font-family: 'fontLufga';
  font-size: 20 px;
  width: 39%;
  /* Adjust the width as needed */
  height: 5%;
  /* Adjust the height as needed */
  border: 1px solid white;
  border-radius: 5px;
  margin-left: 60%;
  margin-top: 2%;
  margin-bottom: 2%;
  @media screen and (max-width: 768px) {
    background-position: 10px center;
    padding-left: 13%;
    font-size: 16px;
    width: 100%;
    margin-left: 2%;
    margin-right: 6%;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}

.view-home--searchInput:focus {
  outline-color: #41A9A7;
}

.Container {
  background-color: #F5F5F5;
  //max-height: 45%;
  min-height: 100 vh;
}

.red {
  background-color: red;
}

.scrollable-content {
  max-height: 30%;
  overflow-x: auto;
  // overflow-x: auto;
  // max-width: 45%;
}

<div class="col-xl-10 col-lg-8 col-md-12 Container">
  <input type="text" class="view-home--searchInput" placeholder="Search" />
  <h1 class="Title">Overview</h1>

  <div class="row green">
    <div class="col-xl-12 col-lg-12 col-md-12">overview</div>
  </div>

  <div class="row">
    <div class="col-xl-5 col-lg-5 col-md-12 block1 overflow-auto">test test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br>
    </div>

    <div class="col-xl-6 col-lg-6 col-md-12 block2">test2</div>
  </div>

  <div class="row mt-2 red">
    <div class="col-xl-5 col-lg-5 col-md-12 block1">test3</div>
    <div class="col-xl-6 col-lg-6 col-md-12 block2">test4</div>
  </div>
</div>

# # #要使容器中的內容可滾動，需要將overflow屬性設置為auto，并為容器指定最大高度。

以百分比表示的容器高度，可以使用vh單位。

將您的內容包裝在容器元素中，例如具有“quot容器& quot或者任何其他合適的類名。這將有助于集中內容和保持響應

修改的HTML和CSS:

超文本標記語言

<div class="container">
  <div class="row green">
    <div class="col-xl-12 col-lg-12 col-md-12">overview</div>
  </div>

  <div class="row">
    <div class="col-xl-5 col-lg-5 col-md-12 block1 overflow-auto">
      test
      <!-- Add your content here -->
    </div>

    <div class="col-xl-6 col-lg-6 col-md-12 block2">test2</div>
  </div>

  <div class="row mt-2 red">
    <div class="col-xl-5 col-lg-5 col-md-12 block1">test3</div>
    <div class="col-xl-6 col-lg-6 col-md-12 block2">test4</div>
  </div>
</div>

鋼性鑄鐵

.container {
  margin: 1%;
  max-width: 98%;
}

.green {
  background-color: white;
}

.block1 {
  background-color: white;
  margin: 2%;
  max-height: 30vh;
  overflow: auto;
}

.block2 {
  background-color: white;
  margin: 2%;
}

.red {
  background-color: red;
}

希望這個解決方案能幫助你實現一個帶有搜索欄的響應式布局。

新答案

更新的CSS代碼:

.green {
  background-color: white;
  margin: 1%;
  max-width: 98%;
}

.block1 {
  background-color: white;
  margin: 2%;
}

.view-home--searchInput {
  background-image: url(/assets/searchIcon.png);
  background-repeat: no-repeat;
  background-position: 5px center;
  padding-left: 3%;
  /* Adjust this value based on your image size */
  font-family: 'fontLufga';
  font-size: 20px;
  width: 39%;
  /* Adjust the width as needed */
  height: 5%;
  /* Adjust the height as needed */
  border: 1px solid white;
  border-radius: 5px;
  margin-left: 2%;
  margin-top: 2%;
  margin-bottom: 2%;
  @media screen and (max-width: 768px) {
    background-position: 10px center;
    padding-left: 13%;
    font-size: 16px;
    width: 100%;
    margin-right: 6%;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}

.view-home--searchInput:focus {
  outline-color: #41A9A7;
}

.Container {
  background-color: #F5F5F5;
}

.red {
  background-color: red;
}

.scrollable-content {
  max-height: 30%;
  overflow-x: auto;
}

更新的HTML代碼:

<div class="col-xl-10 col-lg-8 col-md-12 Container">
  <input type="text" class="view-home--searchInput" placeholder="Search" />
  <h1 class="Title">Overview</h1>

  <div class="row green">
    <div class="col-xl-12 col-lg-12 col-md-12">overview</div>
  </div>

  <div class="row">
    <div class="col-xl-5 col-lg-5 col-md-12 block1">test test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br>
    </div>

    <div class="col-xl-6 col-lg-6 col-md-12 block2">test2</div>
  </div>

  <div class="row mt-2 red">
    <div class="col-xl-5 col-lg-5 col-md-12 block1">test3</div>
    <div class="col-xl-6 col-lg-6 col-md-12 block2">test4</div>
  </div>
</div>