MikeGav
@MikeGav
Web евангелист

(CSS) Горизонтальное растяжение блока по содержимому

Задача:
1. есть класс CSS скроллер задача которого скролировать все что не уметилось внутри него по x и y.
2. в нем вложен класс декоратор box цель которого задавать фон и отступы
3. в него вложено нечто большое по размерам как по x так и по y
Ожидаем что нечто расширит box до нужных размеров как по x так и по y. Нв деле-же происходит растежение лишь по y, а по x нечто как бы пробивает box и рисуется на фоне скроллера что не есть хорошо.

Как заставить нечто растягивать box по x?

Нужно CSS решение без JS.

Демо пример со скроллером, box и нечто:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <style>
    html, body {
    display: block;
    position: relative;
    height:100%;
    width:100%;
    
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    }
    .scroller {
    display: block;
    position: relative;
    height:100%;
    width:100%;

    background-color: grey;
    overflow-x: scroll;
    overflow-y: scroll;
    }
    .box {
    display: block;
    position: relative;
    margin: 10px;
    
    background-color: white;
    
    overflow: visible;
    *width:100%;
    }
    .boroda {
    display: block;
    position: relative;
    width:20000px;
    height:20000px;
    }
  </style>
  <body>
    <div class="scroller">
      <div class="box">
        <div class="boroda">11</div>
      </div>
    </div>
  </body>
</html>
  • Вопрос задан
  • 6232 просмотра
Решения вопроса 1
lastwish
@lastwish
Можно вот так:

.box { display: inline-block; }

jsfiddle.net/6g9jJ/

Но это только в случае, если «нечто» (.boroda) гарантированно не влезает в .box.

Если нужно растягивание блока .box на 100% ширины контейнера .scroller при малых размерах блока .boroda, можно использовать min-width: 100% у блока .box и padding: 10px + box-sizing: border-box у контейнера .scroller (без margin: 10px у .box): jsfiddle.net/6g9jJ/1/

(поддержка свойства box-sizing разными браузерами: caniuse.com/#search=box-sizing — ie8+ и вендорные префиксы)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы