Everything about value key-word auto in CSS

Width: auto

The initial width of block-level elements like

or

is auto, which makes them take the full horizontal space of their containing block.

According to the CSS spec:

‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ = width of containing block

A block element, using width: auto makes it fill
the available space of its parent nicely.

Height: auto

When it comes to height, things are different. The
height of an element is equal to its content where
the default value is auto.

Margins and auto keyword

For margins, the most common use case to center
elements with know widths horizontally.

According to the CSS spec:

If both ‘margin-left’ and ‘margin-right’ are
‘auto’, their used values are equal. This
horizontally centers the element with respect to
the edges of the containing block.

Flexbox

When a child item has an auto margin, it will be
pushed to the far to the opposite side. For
example, if a flex item has margin-left: auto, it
will be pushed to the far right.

.wrapper {
  display: flex;
}

.item-2 {
  margin-left: auto;
}

Not only that, but it can also work in the either
horizontal or vertical direction.

Also, if we have only one child element, we can
use margin: auto to center it horizontally and
vertically if child is inline element.

.item-1 {
  margin: auto;
}

Flex Property And auto Keyword

In flexbox, we can use flex: auto for a child
item. What does that mean? Well, let me explain
that. When a child item has flex: auto, that is
equivalent to flex: 1 1 auto.

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

An item with flex: auto will be sized based on its
width and height, but it can grow or shrink
depending on the extra space available.

CSS Grid and auto

We can set a column to auto, which means its width will be based on its content length.

.wrapper {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
}

When we have a grid, and of the grid items has
margin-left: auto for example, it will be pushed
to the right and its width will be based on its
content length.

Overflow Property

By using auto keyword instead, we can assure that
the scrollbar won’t be shown unless the content
height is bigger than its container.

.element {
  overflow-y: auto;
}

Positioning Properties

To reset the child item in the correct way, we
should use left: auto. According to MDN:
The element is positioned where it should
horizontally be positioned if it were a static
element.

That means, it will respect the padding and it
won’t stick the child item to the edge of its
parent.

Use Cases and Examples

Tooltip Arrow

By using 100%, we avoided using a hardcoded value
(the arrow width) which can fail if we change the
arrow size. This is a more future-proof solution.

.tooltip:before {
  position: absolute;
  right: 100%;
}

.tooltip.to-right:before {
  /* Arrow code */
  position: absolute;
  right: auto;
  left: 100%;
}

Card Component

By using left: auto, we can reset the base
implementation of it easily.

.card .icon {
  position: absolute;
  left: 15px;
  top: 15px;
}

.card.is-right .icon {
  left: auto;
  right: 15px;
}

Flexbox and Auto Margins

We have a row that contains a title, description,
and an action button on the right side. We want
the action button to stick to the right side.

By using margin-left: auto, the action is pushed
to the far right corner.

<div class="item">
  <div class="item-group">
    <!-- Title and description -->
  </div>
  <button class="item__action">Confirm</button>
</div>
.item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item__action {
  margin-left: auto;
}

CSS Grid and Auto Margins

<p class="input-group">
  <label for="">Full Name</label>
  <input type="email" name="" id="" />
</p>
.input-group {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;

  @media (min-width: 700px) {
    grid-template-columns: 0.7fr 2fr;
  }
}

I want to align the label to the left edge of the
input. To do that, I need to apply the following:

.input-group label {
    margin-left: auto;
}

It’s important to account for what would happen
if the content height is big. it’s important to
account for what would happen if the content
height is big.

.modal-body {
  overflow-y: auto;
}