html - How to let one div stretch parent, and other div only fill available height? - Stack Overflow

admin管理员组

文章数量:1122846

I'm working on dashboard like screen, which has two rows, and top doesn't matter much, but second row is the problem. There are two divs with variable heights.

I would love to have left div fill available space, but do not overflow or extend parent, and right should be possible to stretch parent if there is more content in it. Is it even possible?

There is also a little trick to my question. I still need to have the possibility to toggle them on and off (jquery .slideToggle) and left div will in most cases have content long so i need a scroll.

I have tried solving this with position: absolute and min-height, but then toggling left panel is clunky, because of min-height i suppose, demo of this approach can be found here

$(document).on("click", ".header", function() {
  let el = $(this).closest(".parent").find(".body");
  el.slideToggle();
})

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -7.5px;
  margin-left: -7.5px;
}

.column {
  flex: 0 0 50%;
  max-width: 50%;
  padding-right: 7.5px;
  padding-left: 7.5px;
  box-sizing: border-box;
}

.parent {
  position: relative;
  display: flex;
  flex-direction: column;
}

.header {
  background: gray;
  border-radius: 10px 10px 0 0;
  text-align: center;
}

.body {
  background: #33333322;
  border-radius: 0 0 10px 10px;
  flex: 1 1 auto;
  min-height: 1px;
  padding: 1.25rem;
}

.responsive_table {
  overflow-x: auto;
}

table {
  width: 100%;
}

table tr td {
  border-bottom: 1px solid black;
}

<script src=".7.1/jquery.min.js"></script>
<div class="row">
  <div class="column">
    <div class="parent">
      <div class="header">toggle</div>
      <div class="body">
        <div class="responsive_table">
          <table>
            <tr>
              <td>First line</td>
            </tr>
            <tr>
              <td>Second line</td>
            </tr>
            <tr>
              <td>3rd line</td>
            </tr>
            <tr>
              <td>4th line</td>
            </tr>
            <tr>
              <td>5th line</td>
            </tr>
            <tr>
              <td>6th line</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="parent">
      <div class="header">toggle</div>
      <div class="body">
        <div>
          some text<br /> some text<br /> some text<br /> some text<br /> some text<br /> some text<br />
        </div>
      </div>
    </div>
  </div>
</div>

I'm working on dashboard like screen, which has two rows, and top doesn't matter much, but second row is the problem. There are two divs with variable heights.

I would love to have left div fill available space, but do not overflow or extend parent, and right should be possible to stretch parent if there is more content in it. Is it even possible?

There is also a little trick to my question. I still need to have the possibility to toggle them on and off (jquery .slideToggle) and left div will in most cases have content long so i need a scroll.

I have tried solving this with position: absolute and min-height, but then toggling left panel is clunky, because of min-height i suppose, demo of this approach can be found here

$(document).on("click", ".header", function() {
  let el = $(this).closest(".parent").find(".body");
  el.slideToggle();
})

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -7.5px;
  margin-left: -7.5px;
}

.column {
  flex: 0 0 50%;
  max-width: 50%;
  padding-right: 7.5px;
  padding-left: 7.5px;
  box-sizing: border-box;
}

.parent {
  position: relative;
  display: flex;
  flex-direction: column;
}

.header {
  background: gray;
  border-radius: 10px 10px 0 0;
  text-align: center;
}

.body {
  background: #33333322;
  border-radius: 0 0 10px 10px;
  flex: 1 1 auto;
  min-height: 1px;
  padding: 1.25rem;
}

.responsive_table {
  overflow-x: auto;
}

table {
  width: 100%;
}

table tr td {
  border-bottom: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="row">
  <div class="column">
    <div class="parent">
      <div class="header">toggle</div>
      <div class="body">
        <div class="responsive_table">
          <table>
            <tr>
              <td>First line</td>
            </tr>
            <tr>
              <td>Second line</td>
            </tr>
            <tr>
              <td>3rd line</td>
            </tr>
            <tr>
              <td>4th line</td>
            </tr>
            <tr>
              <td>5th line</td>
            </tr>
            <tr>
              <td>6th line</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="parent">
      <div class="header">toggle</div>
      <div class="body">
        <div>
          some text<br /> some text<br /> some text<br /> some text<br /> some text<br /> some text<br />
        </div>
      </div>
    </div>
  </div>
</div>

jsfiddle

• html
• jquery
• css
• bootstrap-4

Share Improve this question Follow edited Nov 22, 2024 at 12:12 DarkBee 15.8k88 gold badges6969 silver badges110110 bronze badges asked Nov 22, 2024 at 11:48 KedorKedor 1,49855 gold badges3131 silver badges5555 bronze badges 2

• Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet using the <> icon.. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See Something in my website/example doesn't work can I just paste a link. – Paulie_D Commented Nov 22, 2024 at 11:48
• 1 @Paulie_D thank you for pointing that out. Added Stack Snippet! – Kedor Commented Nov 22, 2024 at 11:55

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Use display: flex;, flex-direction: column; properties to control the stretching and filling behavior:

.row {
  display: flex;
  flex-wrap: nowrap;
}

.column {
  flex: 1; 
  padding: 7.5px;
  display: flex;
  flex-direction: column;
  overflow: hidden; 
}

.parent {
  display: flex;
  flex-direction: column;
  height: 100%; 
}

.body {
  flex: 1; 
  overflow-y: auto; 
  padding: 1.25rem;
}

本文标签： htmlHow to let one div stretch parentand other div only fill available heightStack Overflow