Flex div горизонтальная прокрутка таблицы

299

07 октября 2017, 19:40

В чем причина изменения левого div, когда вставляешь в правой большую таблицу с overflow-x: auto;. Пример кода

Пробовал различные варианты, но все время мое левое меню будто сужается, когда в правом блоке много данных. Подскажите как реализовать такой просто шаблон (слева меню, в теле справа находится большая таблица, которая прокручивается по горизонтали).

Замечал, что если напрямую правому блоку div придать свойство: overflow-x: auto;, то все работает, однако мне нужно помещать блоки внутри этого блока, и потом все ломается.

P.S.: Как же ненавижу верстку((( Много всяких нюансов, компромиссов и багов. Почему еще не сделали адекватные способы веб-дизайна(( Занимаюсь бэкендом. Там все строго и "правильно работает".

Answer 1

Я вижу блок слева должен быть фиксированной величины, тогда могу предложить использовать min-width и он будет необходимой вам величины. Если он должен быть динамически изменяемым, то там нужно будет сделать немного иначе, сделал под ваш вариант.

.page-wrap { 
    display: flex; 
    width: 100%; 
    font-size: 20pt; 
} 
 
#nav { 
    min-width: 300px; 
    background: green; 
} 
 
#main { 
    background: gray; 
    width: 100%; 
} 
 
.table-wrapper { 
  overflow-x: auto; 
  background: yellow; 
}

<div class="page-wrap"> 
 
  <!-- Nav --> 
  <nav id="nav"> 
    <ul> 
      <li><a href="#">Link 1</a></li> 
      <li><a href="#">Link 2</a></li> 
      <li><a href="#">Link 3</a></li> 
    </ul> 
  </nav> 
 
  <!-- Main --> 
  <section id="main"> 
    <p> 
      Some text 
    </p> 
    <div class="table-wrapper"> 
      <table> 
        <tr> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
        </tr> 
        <tr> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
        </tr> 
        <tr> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
          <td>Column</td> 
        </tr> 
      </table> 
    </div> 
  </section> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Позиционирование при помощи js/jquery

Господа, есть div с шириной и высотой 400px в котором есть ещё один div(content)Мне надо при нажатии кнопки на сайте подвинуть родительский div на 400px влево...

285

HTML

как правильно расположить картинки htn

277

MySQL

Правильный SQL запрос для сложных данных

У меня в таблице есть столбец, который содержит строку типа 1,2,3,4,5 (то бишь implode обычного массива в php)Столбец называется mett Нужно каким-то образом...

299

Java

Вопросы/квадраты вместо русских букв в MySQL базе данных

ЗдравствуйтеДелаю тестовый проект с аутентификацией VK на Spring MVC, вытаскиваю имя и фамилию пользователя на русском языке в переменную, а затем...

298