Question 43965 in Html Question posted in
Some basic documentation can be found here.

How to stop a resizable <div> inside a flexbox from jumping when resized – Html

I have two <div>‘s inside a flexbox, and I’m trying to make the first <div> resizable, while the second <div> should fill the remaining space in the <div>.

I have functioning code, but the resizable <div> jumps a bit when you try to resize it (firefox & edge), and I’m not sure why, or how to stop it from doing that ;-;

fiddle: 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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I fixed the jumping/snapping issue by using a <grid> instead of <flex> (and a bit of duct tape) :/

    <!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;
}

  2. 0

    The problem occurs when the container doesn’t have enough space to push div2 down.
    So I put the height of the container fixed (not resizable).
    but the 2 divs inside it are perfectly resizable as long as their total height doesn’t exceed the height of the parent.

       <!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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search