Как увеличивать модальное окно?

Question

[KlyW]

Есть модальное окно, в котором если кол-во данных будет превышать нормы то появляется scroll, а как сделать так чтобы заместо того чтобы появлялся scroll модальное окно просто увеличивалось (в ширину)?

Вот мой css code:

.modal-backdrop {
  background-color: black;
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  transition: 0.3s;
}

.modal-backdrop.fade.in {
  opacity: 0.3;
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal {
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: #ffffff;
  max-width: 100%;
  overflow: auto;
  min-height: 400px;
  min-width: 300px;
  transition: 0.3s;
}

.modal-content {
  display: flex;
  flex-direction: column;
  min-height: 400px;
}

.modal.fade.in {
  opacity: 1;
}

.modal.fade {
  opacity: 0;
}

Answer 1

[Данил Разумков]

position: absolute;
  display: block;
  background-color: #ffffff;
  max-width: max-content;
  overflow: auto;
  min-height: 400px;
  min-width: 300px;
  margin: 0 auto;
  transition: 0.3s;

Comments

[KlyW]

Не помогает

[Данил Разумков]

KlyW, https://jsfiddle.net/m3feqsev/10/