У меня возникли проблемы с тем, что таблица внутри макета flexbox истекает за пределы родительского flexbox, что делает страницу шире, чем ширина браузера. Это своего рода макет, показывающий аналогичную проблему, которая у меня возникла.

#flex {
  display:flex;
  display:-webkit-flex;
  flex-direction: row;
}
#one {
  background-color: black;
  width: 300px;
  flex-shrink: 0;
  -webkit-flex-shrink: 0;
}
#two {
  background-color:red;
}
<div id="flex">
  <div id="one">one
  </div>
  <div>
    <table>
      <tr>
        <td>First Row</td>
        <td>Second Row</td>
        <td>Third Row</td>
        <td>Fourth Row</td>
        <td>Fifth Row</td>
        <td>Sixth Row</td>
        <td>Seventh Row</td>
        <td>Eighth Row</td>
        <td>Ninth Row</td>
        <td>Tenth Row</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>DataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataData</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </table>
  </div>
</div>    

Вы можете видеть, что хотя .flex - это всего лишь ширина экрана, .two намного шире.

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

Edit: Кажется, что таблица занимает всю 100% ширину страницы, но затем выходит за пределы поля с правой стороны из-за элемента слева.

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

10
David 26 Фев 2016 в 21:54

2 ответа

Лучший ответ

Сначала установите тело:

body {  
  width:100vw;
  height:100vh;
  margin: 0px;
}

Затем пусть самый большой контейнер #flex { max-width: 100%; и ваш table { word-break: break-all;

кодовый ключ

6
Le____ 26 Фев 2016 в 19:45

Ответ выше не сработал для меня, но что сработало:

У меня были проблемы, потому что две таблицы находились прямо в контейнере flexbox. Очевидно, таблицы автоматически принимают тот же размер, что и окружающий их div, даже если это контейнер flexbox ...

Итак, просто поместите два div в свой flexbox и поместите таблицу внутри div:

<div style="display:flex;">
    <div><table> table content </table></div>
    <div><table> table content </table></div>
</div>

Затем, если у вас все еще есть проблемы, убедитесь, что в вашей таблице есть этот CSS:

table{
  width: 100% !important;
  table-layout: fixed;
  word-break: break-word;
}
5
mesqueeb 12 Фев 2018 в 01:48