CODEWITHSUNDEEP
htmlcssflexbox
cts
cts

Reputation: 1084

How to prevent div from growing vertically based on size of child element

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>

Upvotes: 1

Views: 3348

Answers (1)

claudiu.nicola
claudiu.nicola

Reputation: 301

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

Upvotes: 1

Related Questions