css 如何阻止弹性框内的可调整< div>大小对象在调整大小时跳跃

avkwfej4 于 2023-03-20 发布在其他

关注(0)|答案(2)|浏览(150)

我在一个Flexbox中有两个<div>，我试图使第一个<div>可以调整大小，而第二个<div>应该填充<div>中的剩余空间。
我有函数代码，但是当你尝试调整<div>的大小时，它会跳一点（firefox & edge），我不知道为什么，或者如何阻止它这样做;-;
小提琴：https://jsfiddle.net/cftou6rL/

div {
  border: 1px solid black;
}

.container {
  display: flex;
  flex-direction: column;
  
  background: yellow;
  height: 200px;
  width: 150px;
}

#div1 {
  background: red;
}

#div2 {
  background: lightblue;
  height: max-content;
  overflow-y: scroll;
}

.resizable {
  resize: vertical;
  overflow: scroll;
}

<div class="container resizable">

  <div id="div1" class="resizable">
    <p>Div 1</p>
  </div>
  
  <div id="div2">
    <p>Div 2</p>
    <p>Div 2</p>
    <p>Div 2</p>
    <p>Div 2</p>

  </div>
  
</div>

css

来源：https://stackoverflow.com/questions/75750692/how-to-stop-a-resizable-div-inside-a-flexbox-from-jumping-when-resized

2条答案

按热度按时间

lb3vh1jj1#

我通过使用<grid>而不是<flex>（和一点胶带）修复了跳跃/捕捉问题：/

<!DOCTYPE html>

<div class="container">

  <div id="div1" class="resizable">
    <p>Div 1</p>
  </div>
  
  <div id="div2">
    <p>Div 2</p>
    <p>Div 2</p>
    <p>Div 2</p>
    <p>Div 2</p>
  </div>
  
</div>

.container {
  display: grid;
  grid-template-columns: 1;
  grid-template-rows: 1fr 1000fr; /* Without this div2 doesn't stick to div1 when div1 is small */
  
  background: yellow;
  height: 200px;
  width: 150px;
}

#div1 {
  background: red;
  grid-row-start: 1;
  min-height: 50px; /* Consequence of the 1000fr thing */
  max-height: 200px; /* Otherwise resize can escape from the grid */
}

#div2 {
  background: lightblue;
  overflow-y: scroll;
}

.resizable {
  resize: vertical;
  overflow: scroll;
}

赞(0）回复(0）举报 2023-03-20

a14dhokn2#

当容器没有足够的空间向下推div2时，问题就出现了。所以我将容器的高度设置为固定（不可调整大小）。但是容器中的2个div可以完全调整大小，只要它们的总高度不超过父容器的高度。

<!DOCTYPE html>
   <body>
   <div class="container">
      
      <div id="div1" class="resizable">
      <h1>hello</h1>
        <h1>hello</h1>
        <h1>hello</h1>
        <h1>hello</h1> 
        <h1>hello</h1>
        <h1>hello</h1>
        <h1>hello</h1>
      </div>
      
      <div id="div2" class="resizable">
      <h1>hello</h1>
        <h1>hello</h1>
        <h1>hello</h1>
        <h1>hello</h1>
        <h1>hello</h1> 
        <h1>hello</h1>
        <h1>hello</h1>
        <h1>hello</h1>
      </div>
     
     </div>
</body>
<style>

    .container {
      display: flex;
      flex-direction: column;
      background: yellow;
      height: 500px;
      width: 150px;
    }
    
    #div1 {
      background: red;
      max-height: 250px;
      overflow: auto;
      }
    
    #div2 {
      background: lightblue;
      max-height: 250px;
      overflow: auto;
    }
    
    .resizable {
      resize: vertical;
      overflow: auto;
    }
</style>
</html>

赞(0）回复(0）举报 2023-03-20

我来回答

css 如何阻止弹性框内的可调整< div>大小对象在调整大小时跳跃

2条答案

相关问题

热门标签

最新问答