inline-block div not inline

Question

My component have columns and each column have its cards.

• The outer div is white-space: nowrap and overflow: auto

• colums have fixed size and display: inline-block

And some how it turn to be like this: Chrome inspect tool show nothing there. And there another column (you'll in my code, it's outside the *ngFor loop) which is disappeared.

The amount of space above a column is some how related to number of cards in the previous columns.

my component.html:

<div class="grid">

    <mat-card *ngFor="let col of columns" class="col">
        <!-- col name -->
        <mat-card-content>
            <div class="card-container">
                <app-item *ngFor="let card of col.cards" [card]="card"></app-item>
            </div>
            <button mat-button>New card</button>
        </mat-card-content>
    </mat-card>

    <div class="col">
        <button mat-button>New column</button>
    </div>

</div>

my component.css:

.grid {
    white-space: nowrap;
    overflow: auto;
}

mat-card.col {
    padding: 24px 16px;
    width: 300px;
    height: calc(100vh - 112px);
    display: inline-block;
    margin: 0 4px;
}

*about the the title I don't know how to describe it in a proper way.

Answer 1

If you want to align the top of the colums, add the style attribute vertical-align: top:

mat-card.col {
    ...
    vertical-align: top;
}

The default value is vertical-align: baseline. In your original code, the divs are aligned accordingly. The tops are not aligned because the content has a different height in each div. You can see the two situations in the code snippet below.

.grid {
  white-space: nowrap;
  overflow: auto;
  margin-top: 8px;
}

div.col {
  padding: 24px 16px;
  width: 100px;
  display: inline-block;
  margin: 0 4px;
  background-color: orange;
  vertical-align: top;
}

div.col1 {
  padding: 24px 16px;
  width: 100px;
  display: inline-block;
  margin: 0 4px;
  background-color: orange;
}

<p>Top alignment</p>
<div class="grid">
  <div class="col">
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
  </div>
  <div class="col">
    <p>Line</p>
    <p>Line</p>
  </div>
  <div class="col">
    <p>Line</p>
  </div>
</div>

<p>Default alignment</p>
<div class="grid">
  <div class="col1">
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
  </div>
  <div class="col1">
    <p>Line</p>
    <p>Line</p>
  </div>
  <div class="col1">
    <p>Line</p>
  </div>
</div>