My goal is to develop a widget that adjusts its size based on the container's dimensions. The widget can be expanded to display extra information. There are three rows, and I want the following behavior:
- The first row should adjust its size according to the content
- The second row should behave similarly to the first one
- The third row needs to fill the available vertical space, allowing its content to scroll when expanded. When collapsed, the widget should vertically center itself within the parent container
I apologize for using colors, but they serve as a visual aid. Here is my current setup:
https://i.sstatic.net/XJC0x.png
In the example above, the widget (white background) is collapsed and centered within the parent container (red background). Upon clicking "open," the first and second rows (first containing content, second just a button) should retain their original sizes, while the third row expands to occupy the available space. Here is what is happening currently:
https://i.sstatic.net/OHwN8.png
The widget (white background) correctly expands to fit the parent, but the expanded section (black background) overflows. What I aim to achieve instead is this (I used white background to fill the parent): https://i.sstatic.net/IUpkS.png
Below is the code snippet (ignore padding and colors which were added for clarity, along with the @click handler):
<div id="searchWidget">
<div class="row no-row-padding">
<div class="col-12" style="background-color: blue;">
<p style="color: white">First row of content</p>
</div>
</div>
<div class="row">
<div class="col-12">
<hr class="solid">
</div>
</div>
<div class="row no-row-padding">
<button class="btn btn-outline-primary actionButton" type="button" @click="showAdvancedOptions">Open</button>
</div>
<div class="row" id="advancedOptions" style="background-color: black; margin-left: 10px; margin-right: 10px">
<div class="col-12" style="background-color: purple">
<div class="collapse" ref="advancedOptionsCollapse" style="background-color: yellow">
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
</div>
</div>
</div>
</div>
Here is the corresponding CSS:
#searchWidget {
padding: 16px;
max-height: 100%;
width: 100%;
background-color: white;
display: flex;
flex-flow: column;
}
I have experimented with various flex properties but struggle to find a combination that expands and contracts the third row accordingly. I am using Bootstrap 4.0.0 along with Vue.js. Any assistance would be greatly appreciated.