Возможно ли сделать квадратный блок авто ширины средствами HTML+CSS?
Оторвал бы руки, за то что ты пишешь вопрос курсивом<div class="wrapper">
  <div class="box"></div>
</div>.wrapper {
  width: 100px;
  margin: 0 auto;
}

.box {
  background: goldenrod;
  margin-left: auto;
  margin-right: auto;
  padding-top: 50%;
  padding-bottom: 50%;
}
Гуглите выражение css padding hack, тема стара как мир — это как раз то, как сделать высоту блока пропорциональной ширине блока. Вот песочница, меняйте ширину фрейма, квадратик будет пропорционально менять свои размеры.