Как сделать чтобы дочерние блоки могли выходить за размеры родительского блока?

Question

[nluparev]

есть примерно следующий код:

<div class="parent">
    <div class="child" />
    <div class="child" />
    <div class="child" />
  </div>

.parent {
  width: 1024px;
  margin: 0 auto;
}

.child {
  width: 800px;
  height: 300px;
  margin-right: 80px;
}

нужно сделать чтобы дочерние элементы могли выходить за рамки родительского. Тоесть сохранялась точка начала отрисовки дочерних от левого края родительского контейнера и все элементы .item были расположены горизонтально в один ряд и имели ширину как задано в стилях.

я сделал здесь не большой пример кода что бы было понятнее https://codepen.io/SuperManEver/pen/LrqPZN?editors...

там сейчас он идут один за другим вертикально, а нужно что бы горизонтально

спасибо за помощь

Answer 1

[Maxim Zhgulev]

.parent {
  white-space: nowrap;
}
.child {
  white-space: normal;
  display: inline-block;
}

Если я всё правильно понял. Вообще, конечно, лучше посмотреть в сторону flexbox.

.parent {
  display: flex;
  width: 300px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid red;
}
.child {
  flex: 0 0 125px; /* 125px - flex-basis - длина блока */
  height: 100px;
  background: #aaa;
  border: 1px solid #fff;
}

Comments

[nluparev]

e_s_l да, действительно работает. спасибо большое за помощь