Не работает overflow hidden: css — Не работает overflow: hidden

css — Почему не работает overflow-x у таблицы, если у родителя display: flex;?

Вопрос задан 4 года 4 месяца назад

Изменён 2 месяца назад

Просмотрен 2k раза

коллеги. Прошу помочь справиться с проблемой. САБЖ: Есть несколько оберток, которые задают сетку сайта. Внутри main нужна таблица, которая при сужении экрана должна иметь скролл. Но скролл не ставиться! overflow-x — не отрабатывает!! Единственный вариант, который я вижу — display: flex; у родителя. Прошу, помогите справиться с этим.

.currency-table td.name {
  max-width: 150px;
  overflow: hidden;
  white-space: nowrap;
}

.wrapper {
  display: flex; /*ТРЫНДЕЦ!!!*/
  overflow: hidden;   /*у оберток выше но можно считать, что у него*/
}

<div>
  <main>
  <div>
  <div>
    <table>
      <thead>
        <tr>
          <th># </th>
          <th>Name</th>
          <th>Market Cap</th>
          <th>Price</th>
          <th>Volume(24h)</th>
          <th>Circulating Supply</th>
          <th>Change (24h)</th>
          <th>Price Graph (7d)</th>
        </tr>
      </thead>
      <!-- thead -->
      <tbody>
        <tr>
          <td>1</td>
          <td><img src="https://s2.  coinmarketcap.com/static/img/coins/16x16/1.png" alt="Bitcoin"> Bitcoin Bitcoin Bitcoin</td>
          <td>$109,076,404,206</td>
          <td>$6,342.20</td>
          <td>$4,767,080,028</td>
          <td>17,198,512 BTC</td>
          <td>-3.47%</td>
          <td><img alt="sparkline" src="https://s2.coinmarketcap.com/generated/sparklines/web/7d/usd/1.png"></td>
        </tr>
        <tr>
          <td>2</td>
          <td><img src="https://s2.coinmarketcap.com/static/img/coins/16x16/1027.png" alt="Ethereum"> Ethereum</td>
          <td>$36,656,267,933</td>
          <td>$362.18</td>
          <td>$1,947,628,100</td>
          <td>101,210,315 ETH</td>
          <td>3.68%</td>
          <td><img alt="sparkline" src="https://s2.
  coinmarketcap.com/generated/sparklines/web/7d/usd/1027.png"></td>
        </tr>
      </tbody>
      <!-- /tbody -->
    </table>
    <!-- table -->
  </div>
</div>
</main>
  <aside>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae asperiores amet delectus eius, cumque perferendis eveniet ipsa similique ex iure deserunt atque debitis provident, saepe fugiat dignissimos nobis repellendus dolorem.
  </aside>
</div>

• css
• flexbox
• таблицы

2

Необходимо добавить flex-direction: column; к .wrapper

.currency-table-wrapper {
  text-align: left;
  overflow-x: auto;
  width: 100%;
}

.currency-table {
  width: 100%;
}

.currency-table th,
. currency-table td {
  padding: 6px;
  vertical-align: middle;
  border-top: 0;
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 0 #e1e5ea;
}

.currency-table td.grow {
  color: green;
}

.currency-table td.name {
  max-width: 150px;
  overflow: hidden;
  text-align: left;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.currency-table td.name img {
  display: inline-block;
  vertical-align: sub;
}

.currency-table td.pic {
  width: 160px;
  overflow: hidden;
}

.wrapper {
  display: flex;
  /*ТРЫНДЕЦ!!!*/
  flex-direction: column;
  overflow: hidden;
  /*у оберток выше но можно считать, что у него*/
}

<div>
  <main>
    <div>
      <div>
        <table>
          <thead>
            <tr>
              <th># </th>
              <th>Name</th>
              <th>Market Cap</th>
              <th>Price</th>
              <th>Volume(24h)</th>
              <th>Circulating Supply</th>
              <th>Change (24h)</th>
              <th>Price Graph (7d)</th>
            </tr>
          </thead>
          <!-- thead -->
          <tbody>
            <tr>
              <td>1</td>
              <td><img src="https://s2.  coinmarketcap.com/static/img/coins/16x16/1.png" alt="Bitcoin"> Bitcoin Bitcoin Bitcoin</td>
              <td>$109,076,404,206</td>
              <td>$6,342.20</td>
              <td>$4,767,080,028</td>
              <td>17,198,512 BTC</td>
              <td>-3.47%</td>
              <td><img alt="sparkline" src="https://s2.coinmarketcap.com/generated/sparklines/web/7d/usd/1.png"></td>
            </tr>
            <tr>
              <td>2</td>
              <td><img src="https://s2.coinmarketcap.com/static/img/coins/16x16/1027.png" alt="Ethereum"> Ethereum</td>
              <td>$36,656,267,933</td>
              <td>$362.18</td>
              <td>$1,947,628,100</td>
              <td>101,210,315 ETH</td>
              <td>3.68%</td>
              <td><img alt="sparkline" src="https://s2.
  coinmarketcap.com/generated/sparklines/web/7d/usd/1027.png"></td>
            </tr>
          </tbody>
          <!-- /tbody -->
        </table>
        <!-- table -->
      </div>
    </div>
  </main>
  <aside>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae asperiores amet delectus eius, cumque perferendis eveniet ipsa similique ex iure deserunt atque debitis provident, saepe fugiat dignissimos nobis repellendus dolorem.
  </aside>
</div>

1

ОТВЕТ: Поставить overflow: auto; на обертку.

И все прекрасно работает. Вот (добавил кое-какие габариты, для наглядности и чтобы заставить таблицу быть больше враппера).

.currency-table-wrapper {
  text-align: left;
  overflow-y: hidden;
  width: 100%;
  overflow-x: scroll;
  max-width: 500px;
  max-height: 120px;
}
.
  currency-table {
  width: 1000px;
}

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

overflow — CSS | MDN

Свойство CSS overflow определяет, необходимо ли для переполненного блочного элемента содержимое обрезать, предоставить полосы прокрутки или просто отобразить.

Использование свойства overflow со значениями, отличными от visible, (значение, принятое по умолчанию), создаёт новый блочный контекст форматирования (en-US). Это технически необходимо, поскольку если бы float пересекался с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг вторгающихся float’ов. Обтекание при этом было бы необходимо производить после каждого шага прокрутки заново, что привело бы к заметному замедлению прокрутки. Обратите внимание, что при программной установке атрибута

scrollTop для соответствующего HTML-элемента, даже если overflow имеет значение hidden, элемент, возможно, придётся прокрутить.

Начальное значение	visible
Применяется к	Block-containers, flex containers, and grid containers
Наследуется	нет
Обработка значения	как и у каждого из подсвойств этого свойства: overflow-x (en-US): as specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x (en-US) or overflow-y (en-US) is neither visible nor clip overflow-y (en-US): as specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x (en-US) or overflow-y (en-US) is neither visible nor clip
Animation type	discrete

Формат синтаксиса (en-US):

overflow = 
[ (en-US) visible | (en-US) hidden | (en-US) clip | (en-US) scroll | (en-US) auto ] (en-US){1,2} (en-US)  

overflow: visible
overflow: hidden
overflow: scroll
overflow: auto
overflow: inherit

Значения

visible

По умолчанию. Содержимое не обрезается, может отображаться снаружи блока, в котором оно расположено.

hidden

Контент обрезается, без предоставления прокрутки.

scroll

Содержимое обрезается и браузер использует элементы прокрутки, не важно было ли обрезано содержимое или нет. Это избегает многих проблем касательно появления прокруток и их исчезновения в динамичной среде. Принтеры могут печатать переполненное содержимое.

auto

Зависит от агента пользователя. Браузеры такие как Firefox предоставляют прокрутку, если содержимое переполняет блок.

Расширения Mozilla

-moz-scrollbars-none Этот API вышел из употребления и его работа больше не гарантируется.

Используйте overflow:hidden.

-moz-scrollbars-horizontal «> Deprecated

Использование overflow-x (en-US) и overflow-y (en-US) предпочтительнее.

-moz-scrollbars-vertical Deprecated

Использование overflow-x (en-US) и overflow-y (en-US) предпочтительнее.

-moz-hidden-unscrollable Non-standard

Главным образом предназначен для внутреннего использования и для тем. Отключает прокрутку XML root элементов и <html>, <body> клавишами со стрелками и колесом мыши.

p {
     width: 12em;
     height: 6em;
     border: dotted;
     overflow: visible; /* содержимое не обрезается */
}

visible (default) Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: hidden; /* полосы прокрутки не предоставляются */ }

overflow: hidden Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: scroll; /* всегда показывать полосы прокрутки */ }

overflow: scroll Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: auto; /* добавить полосы прокрутки, если это необходимо */ }

overflow: auto Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Спецификация	Статус	Комментарий
CSS Overflow Module Level 3 Определение ‘overflow’ в этой спецификации.	Рабочий черновик	Changed syntax to allow one or two keywords instead of only one
CSS Box Model Определение ‘overflow’ в этой спецификации.	Кандидат в рекомендации	Без изменений
CSS Level 2 (Revision 1) Определение ‘overflow’ в этой спецификации.	Рекомендация	Initial definition.

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.

Firefox (Gecko) Примечания

Из-за Firefox 3.6 (Gecko 1.9.2), свойство overflow неверно применяется к элементам table-group (<thead> , <tbody> , <tfoot>). Это поведение будет исправлено в следующих версиях.

Internet Explorer Примечания

Internet Explorer 4 — 6 увеличивает элемент с overflow:visible (значение по умолчанию), чтобы заполнить содержимое в нём. height/width действуют подобно min-height/min-width.

• Связанные свойства CSS: text-overflow (en-US), white-space, overflow-x (en-US), overflow-y (en-US), overflow-inline (en-US), overflow-block, clip (en-US), display

Last modified: 000Z»>7 нояб. 2022 г., by MDN contributors

html — Скрытое переполнение не работает

спросил 10 лет, 8 месяцев назад

Изменено 10 лет, 8 месяцев назад

Просмотрено 44к раз

У меня есть div, содержащий текст, изображение и текстовые данные внутри ul li, а ниже — структура html. Я применил скрытое переполнение к классу .sbox, но, похоже, это не работает, и текстовые данные не кажутся скрытыми и переполненными.

JSFiddle — http://jsfiddle.net/SAN6n/

HTML

 

  <ул>
    

     <дел>
        <дел >
             
Изображение1 
 
            
 
Сейчас весна, и погода выглядит хорошей...
 
             jpg"/>