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

266
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>

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

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

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

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

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

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

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

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

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

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

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

 244