Prevent a specific child element from expanding its parent element

Question

This is what I have right now:

* {
  box-sizing: border-box;
}

.container {
  width:  300px;
  border: 1px solid #000;
}

.mainrow, .subrows div {
  width:   100%;
  padding: 10px
}

.mainrow {
  background: #CCC;
}

.subrows div {
  background: #DDD;
}

.subrows {
  overflow: auto;
}

<div class="container">
  <div class="mainrow">First row</div>
  <div class="subrows">
    <div>Sub row 1</div>
    <div>Sub row 2</div>
    <div>Sub row 3</div>
    <div>Sub row 4</div>
    <div>Sub row 5</div>
    <div>Sub row 6</div>
    <div>Sub row 7</div>
    <div>Sub row 8</div>
    <div>Sub row 9</div>
    <div>Sub row 10</div>
  </div>
</div>

What I want is to prevent .ops from expanding .container.

I attempted a fix described in this post:

* {
  box-sizing: border-box;
}

.container {
  width:       300px;
  padding-top: 100px;
  border:      1px solid #000;
}

.mainrow, .subrows div {
  width:   100%;
  padding: 10px
}

.mainrow {
  background: #CCC;
}

.subrows {
  position:   absolute;
  width:      100%;
  max-height: 100px;
  top:        0;
  left:       0;
  overflow:   auto;
}

.subrows div {
  background: #DDD;
}

<div class="container">
  <div class="mainrow">First row</div>
  <div class="subrows">
    <div>Sub row 1</div>
    <div>Sub row 2</div>
    <div>Sub row 3</div>
    <div>Sub row 4</div>
    <div>Sub row 5</div>
    <div>Sub row 6</div>
    <div>Sub row 7</div>
    <div>Sub row 8</div>
    <div>Sub row 9</div>
    <div>Sub row 10</div>
  </div>
</div>

But obviously this is not working. .subrows appears above .mainrow, and the layout is distorted. What should be done?

Your first snippet seems to work. Your second doesn't. What is it you want to achieve? — Simon Jensen, Oct 04 '18 at 12:18

score 3 · Accepted Answer · answered Oct 04 '18 at 12:29

Give your container relative positioning and add top:100% to the subrows

* {
  box-sizing: border-box;
}

.container {
  width:       300px;
  border:      1px solid #000;
  position:relative;
}

.mainrow, .subrows div {
  width:   100%;
  padding: 10px
}

.mainrow {
  background: #CCC;
}

.subrows {
  position:   absolute;
  width:      100%;
  max-height: 100px;
  top:        100%;
  margin-top: 1px;      /* for container border to show */
  left:       0;
  overflow:   auto;
}

.subrows div {
  background: #DDD;
}

<div class="container">
  <div class="mainrow">First row</div>
  <div class="subrows">
    <div>Sub row 1</div>
    <div>Sub row 2</div>
    <div>Sub row 3</div>
    <div>Sub row 4</div>
    <div>Sub row 5</div>
    <div>Sub row 6</div>
    <div>Sub row 7</div>
    <div>Sub row 8</div>
    <div>Sub row 9</div>
    <div>Sub row 10</div>
  </div>
</div>

As you can see from the border of the container, it has not expanded to fit the subrows in (why you want this I do not know as anything below the mainrow will now be covered by the subrows)

Thank, you this worked! And if you want to know why I would like to do this, it is for simulating a ` — Wais Kamal, Oct 05 '18 at 07:57

score 0 · Answer 2 · answered Oct 04 '18 at 12:16

* {
  box-sizing: border-box;
}

.container {
  width:       300px;
  border:      1px solid #000;
}

.mainrow, .subrows div {
  width:   100%;
  padding: 10px
}

.mainrow {
  background: #CCC;
}

.subrows {
  position:   relative;
  width:      100%;
  height: 100px;
  top:        0;
  left:       0;
  overflow:   auto;
}

.subrows div {
  background: #DDD;
}

<div class="container">
  <div class="mainrow">First row</div>
  <div class="subrows">
    <div>Sub row 1</div>
    <div>Sub row 2</div>
    <div>Sub row 3</div>
    <div>Sub row 4</div>
    <div>Sub row 5</div>
    <div>Sub row 6</div>
    <div>Sub row 7</div>
    <div>Sub row 8</div>
    <div>Sub row 9</div>
    <div>Sub row 10</div>
  </div>
</div>

Thanks for your answer, but this is not what I want. Your `.subrows` is still expanding `.container`. — Wais Kamal, Oct 05 '18 at 07:53

Prevent a specific child element from expanding its parent element

2 Answers2