Make element fill but not expand

Question

See the snippet below. I need .sidebar-expand-height element to define the height of the .box and .fill-but-not-expand element need to adjust (fill the free space but not expand further than the sidebar), if .fill-but-not-expand overflow I need to show the scrollbar.

.sidebar-item and .content-item elements are dynamic

initial snippet:

.box {
  display: flex;
  align-items: flex-start;
}

.content {
  width: 66%;
  background-color: blue;
}

.content-item {
  height: 50px;
}

.sidebar-expand-height {
  width: 33%;
  background-color: green;
}

.sidebar-item {
  height: 30px;
}

.fill-but-not-expand {
  overflow-y: auto;
}

<div class="box">
  <div class="content">
    <div class="static-but-not-defined-height">I am static</div>
    <div class="fill-but-not-expand">
      <div class="content-item">content item</div>
      <div class="content-item">content item</div>
      <div class="content-item">content item</div>
      <div class="content-item">content item</div>
    </div>
  </div>
  <div class="sidebar-expand-height">
    <div class="sidebar-item">sidebar item</div>
    <div class="sidebar-item">sidebar item</div>
    <div class="sidebar-item">sidebar item</div>
    <div class="sidebar-item">sidebar item</div>
    <div class="sidebar-item">sidebar item</div>
    <div class="sidebar-item">sidebar item</div>
  </div>
</div>

UPD: I found the solution, thanks for the link to the related question

updated snippet:

.box {
  display: flex;
}

.content {
  width: 66%;
  background-color: blue;
  display: flex;
  flex-direction: column;
}

.content-item {
  height: 50px;
}

.sidebar-expand-height {
  width: 33%;
  background-color: green;
}

.sidebar-item {
  height: 30px;
}

.wrap {
  flex: 1;
}

.fill-but-not-expand {
  overflow-y: auto;
  height: 0;
  min-height: 100%;
}

<div class="box">
  <div class="content">
    <div class="static-but-not-defined-height">I am static</div>
    <div class="wrap">
      <div class="fill-but-not-expand">
        <div class="content-item">content item</div>
        <div class="content-item">content item</div>
        <div class="content-item">content item</div>
        <div class="content-item">content item</div>
      </div>
    </div>
  </div>
  <div class="sidebar-expand-height">
    <div class="sidebar-item">sidebar item</div>
    <div class="sidebar-item">sidebar item</div>
    <div class="sidebar-item">sidebar item</div>
    <div class="sidebar-item">sidebar item</div>
    <div class="sidebar-item">sidebar item</div>
    <div class="sidebar-item">sidebar item</div>
  </div>
</div>

Kick Visser · Answer 1 · 2021-05-21T06:58:54.773

1

Here you go mate

    <div class="box">
  <div class="content">
    <div class="static-but-not-defined-height">I am static</div>
    <div class="fill-but-not-expand">
      <div class="content-item">content item</div>
      <div class="content-item">content item</div>
      <div class="content-item">content item</div>
      <div class="content-item">content item</div>
    </div>
  </div>
  <div class="sidebar-expand-height">
    <div class="sidebar-item">
      
    </div> 
    <ul>
<dl>
<dt> sidebare item
  <dt> sidebare item
    <dt> sidebare item
      <dt> sidebare item
        
</dl>
     

</div>

.box {
  display: flex;
  align-items: auto;
}

.content {
  width: 65%;
  background-color: blue;
}

.content-item {
  height: 50px;
}

.sidebar-expand-height {
  width: 33%;
  background-color: green;
  
}

.sidebar-item {
  height: 50px;
}

.fill-but-not-expand {
  overflow-y: auto;
}

edited May 21 '21 at 06:58

answered May 20 '21 at 06:17

Kick Visser

34
4

It doesn't work, `.fill-but-not-expand` just expand – hehoboy May 20 '21 at 07:02
It has filled the white space and didn't expand further. that is what u want right ? Note: didn't post the HTML code with it leme try that again – Kick Visser May 20 '21 at 07:26
If you add more `.content-item` items then `.box` height will increase along with the sidebar height, it's not what I wanted. Gladly I already found the solution and updated my question with the solution – hehoboy May 20 '21 at 11:38
u can use DL tag ( discription list ) it doesnt change then, ill change my original answer so you can copy. – Kick Visser May 21 '21 at 06:58

Make element fill but not expand

1 Answers1