Using height 100% of parent without explicitly defining height of parent

Question

I have this very simple snippet:

.parent {
  display: flex;
  background-color: blue;
}

.child100 {
  width: 6px;
  height: calc(100% - 5px);
  background-color: red;
}

<body>
  <div class="parent">
    <div class="child100"></div>
    <div class="childContent">
      <table>
        <tr>
          <th>
            1
          </th>
          <th>
            2
          </th>
        </tr>
        <tr>
          <th>
            3
          </th>
          <th>
            4
          </th>
        </tr>
      </table>
    </div>
  </div>
</body>

height: calc(100% - 5px); doesn't take any effect, also if I set height: 100% for html body and parent tags.
I don't want to explicitly define the height of parent in pixels, rather I want it to fit its content (taking the height of table).
I don't want the position of child100 to be absolute as the parent div is part of a very long element with overflow and that will stuck child100 ontop when scrolling, rather than being next to table.
Also, omitting height attribute for .child100 and adding margin-bottom: -5px for the other child will affect the height of the whole parent element as seen by the background-color.

remove the height definition and it will fit the height of the table by default — Temani Afif, May 14 '23 at 14:26
@TemaniAfif It's not a solution, as you can see, I need its height to be 100% - 5px and not the height of the table — user2401856, May 14 '23 at 14:27
Why don't you just add margin-bottom: 5px to `.child100` and remove the height property? Heights don't work if the size of the parent isn't specified explicitly (see [this](https://stackoverflow.com/a/7049918/12571484) answer for details) — Adam, May 14 '23 at 14:44

score 2 · Accepted Answer · answered May 14 '23 at 19:47

Remove the height definition and add a bottom margin. The stretch alignment of flexbox will do the job for your.

.parent {
  display: flex;
  background-color: lightblue;
}

.child100 {
  width: 6px;
  margin-bottom: 5px;
  background-color: red;
}

<body>
  <div class="parent">
    <div class="child100"></div>
    <div class="childContent">
      <table>
        <tr>
          <th>
            1
          </th>
          <th>
            2
          </th>
        </tr>
        <tr>
          <th>
            3
          </th>
          <th>
            4
          </th>
        </tr>
      </table>
    </div>
  </div>
</body>

Using height 100% of parent without explicitly defining height of parent

1 Answers1