0

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>
cts
  • 908
  • 1
  • 9
  • 30
  • Set `max-height`?! – Yousaf Oct 29 '21 at 10:21
  • hmm that doesn't help - it's because `container` keeps growing to the full height of it's elements, so while `heading-tab` is only 72px - the list could be 500px for example. – cts Oct 29 '21 at 10:25

1 Answers1

1

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

claudiu.nicola
  • 311
  • 2
  • 9
  • hey - thanks for this. but not quite what I need: - `heading-tab` should never grow to more than it's set height - but `list` and it's content should be allowed to grow as large as needed so all content is visible without scrolling? – cts Oct 29 '21 at 10:34
  • I see, check this out: https://stackoverflow.com/a/38852981/1107544 I tested this solution here: https://jsfiddle.net/Ljopa0hy/58/ – claudiu.nicola Oct 29 '21 at 10:44