I've worked my problem into a codesnippet - I'm actually using React so it actually behaves like a list of TabHeadings
- and when one is clicked, it expands the List
to the right of it (so only one ever is visible at a time).
I have a height on my heading-tab
that I don't want it to exceed, but because the height of list
is larger - it makes it expand to the same height, how can I prevent this?
.container {
display: grid;
grid-template-columns: 294px auto;
}
.heading-tab {
display: flex;
justify-content: space-between;
align-items: flex-start;
height: 72px;
width: 294px;
border-top: 1px solid lightgrey;
}
.heading-text {
padding-top: 22px;
padding-bottom: 22px;
padding-left: 32px;
margin-bottom: 0px;
font-size: 16px;
}
.list-container {
margin-left: 96px;
}
<div class="container">
<div class="heading-tab">
<p class="heading-text">Heading One</p>
</div>
<div class="list-container">
<div class="list">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<ul>
</div>
</div>
</div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
Is this the result you're trying to achieve?
https://jsfiddle.net/Ljopa0hy/17/
Basically, set the height on the container and use flexbox instead of grid.
.container {
display: flex;
height: 72px;
}
.heading-tab {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 294px;
background-color: #eee;
}
.list-container {
background-color: #aaa;
width: 100%;
overflow-y: scroll;
}
Update:
Check out this solution https://stackoverflow.com/a/38852981/1107544