主页 / user-6131222

epatmalnieks's questions

Martin Hope
epatmalnieks
Asked: 2024-06-05 01:12:00 +0800 CST
  • 9

我希望当蓝色 div 中没有太多内容时，蓝色 div 缩小并允许绿色 div 占用更多空间，反之亦然。但是，如果两个 div 中都有大量内容，则两个 div 都不能大于容器的 50%。

.container {
  display: flex;
  flex-direction: column;
  height: 300px;
}

.topDiv {
  background-color: blue;
  color: white;
  flex: 1;
  overflow: auto;
}

.bottomDiv {
  background-color: green;
  color: white;
  flex: 1;
  overflow: auto;
}
<div class="container">
    <div class="topDiv">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
    </div>
    <div class="bottomDiv">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
    </div>
  </div>

html