如何使div列具有固定高度，并根据里面的内容进行响应

Question

我创建了以下布局，我希望 div 列“标题 1”“标题 2”具有固定的高度，并且当其中有内容时也会增长，现在当我向其中添加内容时，内容会超过该高度分区我希望内容位于 div 内并相应增长。我已经尝试过 min-height 但它不起作用我想知道是否有办法实现这一点。

* {
  margin: 0;
  padding: 0;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: white;
  box-sizing: border-box;
}


/**** Main Layout container ****/

.container {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}


/**** Sidebar Static Left ****/

.sidebar {
  width: 12%;
  height: 100%;
  background-color: #f1f1f1;
  overflow-y: auto;
  position: absolute;
  top: 0;
  left: 0;
}


/*** Fluid Container ***/

.fluid-container {
  width: 88%;
  height: 100%;
  background-color: cadetblue;
  position: absolute;
  left: 12%;
  overflow: hidden;
}

.navbar {
  width: 100%;
  text-align: center;
  background-color: skyblue;
  color: #484545;
  font-size: 1.7rem;
  display: flex;
  justify-content: center;
}

.header h1 {
  border: 2px solid skyblue;
  width: 180px;
  display: block;
  margin: 0 auto;
  font-size: 1.5rem;
  border-radius: 3px;
  background-color: skyblue;
  color: rgb(31, 30, 30);
}


/*** Title Box Containers ***/

.box-container {
  width: 100%;
  background-color: skyblue;
  display: flex;
  height: 100%;
}

.box {
  width: 50%;
  border: 2px solid rgb(229 221 221);
  background-color: skyblue;
  display: flex;
  overflow-x: scroll;
  height: calc(100% - 5%);
}

div#box1 {
  width: 100%;
  overflow-x: auto;
}

@media only screen and (min-width: 1200px) {
  div#box1 {
    justify-content: center;
  }
}

.item {
  width: 220px;
  border: 2px solid rgb(229 221 221);
  margin: 0 7px;
  background-color: #f1f1f1;
  min-width: 220px;
}

#item2 {
  overflow-y: auto;
  height: calc(100% - 2px);
  min-width: 220px;
  width: 220px;
}

#item1 {
  height: calc(100% - 50%);
  width: 220px;
  min-width: 220px;
  overflow-y: auto;
}

#item3 {
  height: calc(100% - 30%);
  width: 220px;
  min-width: 220px;
}

h1 {
  border: 2px solid skyblue;
}

h3 {
  border: 2px solid skyblue;
  text-align: center;
  border-radius: 7px;
  background-color: skyblue;
  color: #484545;
  font-size: 1.7rem;
}

p {
  text-align: left;
  padding: 0px 4px;
  color: rgb(31, 30, 30);
}


/* The side navigation menu */

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #f1f1f1;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.5s;
}

span {
  float: right;
  margin: -41px 17px 0px 0px;
  color: black;
  font-size: 2.5rem;
  position: absolute;
  top: 35px;
  right: 5px;
  cursor: pointer;
}


/* The navigation menu links */

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
  cursor: pointer;
}


/* Position and style the close button (top right corner) */

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  color: black;
}


/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

<div class="container">
  <div class="sidebar bg-slate-50">
    <h3>Title</h3>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas suscipit aliquid nobis eius harum ipsam eum perferendis modi excepturi laudantium, rerum recusandae nulla odio ullam aliquam aut quam ea cupiditate officiis? Tempora corrupti, officiis
      placeat quam praesentium quis dolores itaque repudiandae libero voluptates consequatur repellat, temporibus et laboriosam, accusantium ducimus quia distinctio a iste quaerat culpa ex cum. Officia laborum nesciunt quidem. Aliquid possimus soluta
      dolores obcaecati doloribus aut corrupti, at tenetur odit optio, facilis ipsam natus illum magni voluptas, quos animi. Sunt laudantium ut itaque, aperiam provident, nisi officiis inventore perspiciatis tenetur quidem sapiente natus vel ipsum omnis
      ad quia nemo ipsam in harum? Distinctio tempora quis facere animi molestiae iste quas voluptas iusto quaerat, officia modi aliquam earum saepe at est, suscipit vitae optio alias doloribus ea molestias illum impedit? Culpa sint, iure, illo provident
      officia minima consectetur, ea autem ut atque dolore quaerat dolor adipisci odio accusantium dolores dolorum odit rem dignissimos soluta. Veniam laborum, sint qui ad nemo ipsam voluptates magnam iure consectetur reprehenderit adipisci sed quos placeat
      ipsa aperiam repudiandae officia? Eum dicta quod, laudantium
    </p>
  </div>
  <div class="fluid-container">
    <div class="navbar">
      <div class="header">
        <h1>Header Section</h1>
        <div id="mySidenav" class="sidenav">
          <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Clients</a>
          <a href="#">Contact</a>
        </div>
      </div>

      <span onclick="openNav()">
                    <ion-icon name="menu-outline"></ion-icon>
                </span>
    </div>


    <div class="box-container">
      <div id="box1" class="box">
        <div id="item1" class="item bg-slate-50">
          <h3>Title 1</h3>

        </div>
        <div id="item2" class="item bg-slate-50">
          <h3>Title 2</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam laborum doloremque quas tempora deleniti molestiae ullam nostrum repellat quae commodi, quaerat labore, rerum voluptatibus perferendis ex cupiditate excepturi officiis! Obcaecati
            quisquam sit vero a, vitae laborum eius reiciendis placeat nemo provident ea labore incidunt? Distinctio, explicabo? Ab asperiores eos quasi eum blanditiis ipsum ut reprehenderit nostrum dignissimos cupiditate, ipsa facere inventore laudantium
            ducimus dicta sunt quidem, nam harum. Esse iure, voluptate ducimus a voluptatem expedita quas nam officia obcaecati saepe necessitatibus exercitationem quo iusto, libero omnis? Earum esse, dolor quo non vitae repellat odit. Ad voluptates iure
            tenetur explicabo excepturi!</p>
        </div>
        <div id="item3" class="item bg-slate-50">
          <h3>Title 3</h3>
        </div>
      </div>
      <div id="box2" class="box">
        <div id="item1" class="item bg-slate-50">
          <h3>Title A</h3>
        </div>
        <div id="item2" class="item bg-slate-50">
          <h3>Title B</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam laborum doloremque quas tempora deleniti molestiae ullam nostrum repellat quae commodi, quaerat labore, rerum voluptatibus perferendis ex cupiditate excepturi officiis! Obcaecati
            quisquam sit vero a, vitae laborum eius reiciendis placeat nemo provident ea labore incidunt? Distinctio, explicabo? Ab asperiores eos quasi eum blanditiis ipsum ut reprehenderit nostrum dignissimos cupiditate, ipsa facere inventore laudantium
            ducimus dicta sunt quidem, nam harum. Esse iure, voluptate ducimus a voluptatem expedita quas nam officia obcaecati saepe necessitatibus exercitationem quo iusto, libero omnis? Earum esse, dolor quo non vitae repellat odit. Ad voluptates iure
            tenetur explicabo excepturi!</p>
        </div>
        <div id="item3" class="item bg-slate-50">
          <h3>Title C</h3>
        </div>
      </div>

    </div>
  </div>
</div>
<script>
  function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
  }


  function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
  }
</script>

<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

Answer 1

在 #item2 上使用 height: fit-content;。这样两个 div 都会根据里面的内容增大/缩小。

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}


function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: white;
  box-sizing: border-box;
}


/**** Main Layout container ****/

.container {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}


/**** Sidebar Static Left ****/

.sidebar {
  width: 12%;
  height: 100%;
  background-color: #f1f1f1;
  overflow-y: auto;
  position: absolute;
  top: 0;
  left: 0;
}


/*** Fluid Container ***/

.fluid-container {
  width: 88%;
  height: 100%;
  background-color: cadetblue;
  position: absolute;
  left: 12%;
  overflow: hidden;
}

.navbar {
  width: 100%;
  text-align: center;
  background-color: skyblue;
  color: #484545;
  font-size: 1.7rem;
  display: flex;
  justify-content: center;
}

.header h1 {
  border: 2px solid skyblue;
  width: 180px;
  display: block;
  margin: 0 auto;
  font-size: 1.5rem;
  border-radius: 3px;
  background-color: skyblue;
  color: rgb(31, 30, 30);
}


/*** Title Box Containers ***/

.box-container {
  width: 100%;
  background-color: skyblue;
  display: flex;
  height: 100%;
}

.box {
  width: 50%;
  border: 2px solid rgb(229 221 221);
  background-color: skyblue;
  display: flex;
  overflow-x: scroll;
  height: calc(100% - 5%);
}

div#box1 {
  width: 100%;
  overflow-x: auto;
}

@media only screen and (min-width: 1200px) {
  div#box1 {
    justify-content: center;
  }
}

.item {
  width: 220px;
  border: 2px solid rgb(229 221 221);
  margin: 0 7px;
  background-color: #f1f1f1;
  min-width: 220px;
}

#item2 {
  overflow-y: auto;
  height: fit-content;
  min-width: 220px;
  width: 220px;
}

#item1 {
  height: calc(100% - 50%);
  width: 220px;
  min-width: 220px;
  overflow-y: auto;
}

#item3 {
  height: calc(100% - 30%);
  width: 220px;
  min-width: 220px;
}

h1 {
  border: 2px solid skyblue;
}

h3 {
  border: 2px solid skyblue;
  text-align: center;
  border-radius: 7px;
  background-color: skyblue;
  color: #484545;
  font-size: 1.7rem;
}

p {
  text-align: left;
  padding: 0px 4px;
  color: rgb(31, 30, 30);
}


/* The side navigation menu */

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #f1f1f1;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.5s;
}

span {
  float: right;
  margin: -41px 17px 0px 0px;
  color: black;
  font-size: 2.5rem;
  position: absolute;
  top: 35px;
  right: 5px;
  cursor: pointer;
}


/* The navigation menu links */

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
  cursor: pointer;
}


/* Position and style the close button (top right corner) */

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  color: black;
}


/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

<div class="container">
  <div class="sidebar bg-slate-50">
    <h3>Title</h3>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas suscipit aliquid nobis eius harum ipsam eum perferendis modi excepturi laudantium, rerum recusandae nulla odio ullam aliquam aut quam ea cupiditate officiis? Tempora corrupti, officiis
      placeat quam praesentium quis dolores itaque repudiandae libero voluptates consequatur repellat, temporibus et laboriosam, accusantium ducimus quia distinctio a iste quaerat culpa ex cum. Officia laborum nesciunt quidem. Aliquid possimus soluta
      dolores obcaecati doloribus aut corrupti, at tenetur odit optio, facilis ipsam natus illum magni voluptas, quos animi. Sunt laudantium ut itaque, aperiam provident, nisi officiis inventore perspiciatis tenetur quidem sapiente natus vel ipsum omnis
      ad quia nemo ipsam in harum? Distinctio tempora quis facere animi molestiae iste quas voluptas iusto quaerat, officia modi aliquam earum saepe at est, suscipit vitae optio alias doloribus ea molestias illum impedit? Culpa sint, iure, illo provident
      officia minima consectetur, ea autem ut atque dolore quaerat dolor adipisci odio accusantium dolores dolorum odit rem dignissimos soluta. Veniam laborum, sint qui ad nemo ipsam voluptates magnam iure consectetur reprehenderit adipisci sed quos placeat
      ipsa aperiam repudiandae officia? Eum dicta quod, laudantium
    </p>
  </div>
  <div class="fluid-container">
    <div class="navbar">
      <div class="header">
        <h1>Header Section</h1>
        <div id="mySidenav" class="sidenav">
          <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Clients</a>
          <a href="#">Contact</a>
        </div>
      </div>

      <span onclick="openNav()">
                    <ion-icon name="menu-outline"></ion-icon>
                </span>
    </div>


    <div class="box-container">
      <div id="box1" class="box">
        <div id="item1" class="item bg-slate-50">
          <h3>Title 1</h3>

        </div>
        <div id="item2" class="item bg-slate-50">
          <h3>Title 2</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam laborum doloremque quas tempora deleniti molestiae ullam nostrum repellat quae commodi, quaerat labore, rerum voluptatibus perferendis ex cupiditate excepturi officiis! Obcaecati
            quisquam sit vero a, vitae laborum eius reiciendis placeat nemo provident ea labore incidunt? Distinctio, explicabo? Ab asperiores eos quasi eum blanditiis ipsum ut reprehenderit nostrum dignissimos cupiditate, ipsa facere inventore laudantium
            ducimus dicta sunt quidem, nam harum. Esse iure, voluptate ducimus a voluptatem expedita quas nam officia obcaecati saepe necessitatibus exercitationem quo iusto, libero omnis? Earum esse, dolor quo non vitae repellat odit. Ad voluptates iure
            tenetur explicabo excepturi!</p>
        </div>
        <div id="item3" class="item bg-slate-50">
          <h3>Title 3</h3>
        </div>
      </div>
      <div id="box2" class="box">
        <div id="item1" class="item bg-slate-50">
          <h3>Title A</h3>
        </div>
        <div id="item2" class="item bg-slate-50">
          <h3>Title B</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam laborum doloremque quas tempora deleniti molestiae ullam nostrum repellat quae commodi, quaerat labore, rerum voluptatibus perferendis ex cupiditate excepturi officiis! Obcaecati
            quisquam sit vero a, vitae laborum eius reiciendis placeat nemo provident ea labore incidunt? Distinctio, explicabo? Ab asperiores eos quasi eum blanditiis ipsum ut reprehenderit nostrum dignissimos cupiditate, ipsa facere inventore laudantium
            ducimus dicta sunt quidem, nam harum. Esse iure, voluptate ducimus a voluptatem expedita quas nam officia obcaecati saepe necessitatibus exercitationem quo iusto, libero omnis? Earum esse, dolor quo non vitae repellat odit. Ad voluptates iure
            tenetur explicabo excepturi!</p>
        </div>
        <div id="item3" class="item bg-slate-50">
          <h3>Title C</h3>
        </div>
      </div>

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

<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>