How to delete gap when one element has no content and has height 0?-CodePudding

.parent {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: green;
}

.main {
  flex-grow: 2;
  background: red;
}

.header {
  background: blue;
}

.big {
  height: 500px;
  width: 60px;
}

<div >
  <div >
    <div ></div>
    <div ></div>
  </div>
</div>

I created a template which is divided into a header and a main content. The header is optional and has an automatic height adjustment according to the content. The rest of the height of the parent has to be filled by the main element.

I tried to do this with display flex and gap. But when the first element is not there the gap still remains. The gap must be 16px when there are two elements. Is it somehow possible to remove gap with styles when there is one element or is there any other way to manage the height of the elements so that the main element always occupies the remaining space?

CodePudding user response：

.parent {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // gap: 16px;
  background: green;
}

.main {
  flex-grow: 2;
  background: red;
}

.header {
  background: blue;
  margin-bottom: 16px;
}

.big {
  height: 500px;
  width: 60px;
}

<div >
  <div >
    <!-- <div ></div> -->
    <div ></div>
  </div>
</div>

You can use

.header {
  background: blue;
  margin-bottom: 16px;
}

instead of gap: 16px;

CodePudding user response：

The gap property is applied to the container. You can not set a specific gap for the children div, because it is a property of its parent.

What I would advise is to set your empty div, with the display:none property. And once you inject content to it with javascript, set its display to "block", "flex", or whatever display property it is using when visible.

Another solution would be to replace "gap" with margin or padding bottom on the children. And since this is a property of the children components, you will be able to make individual exceptions.