Почему flex-box переполняется через обертку?

Question

Я строю адаптивную таблицу на основе этого Codepen https://codepen.io/vasansr/pen/PZOJXr. По сути, она складывает заголовки и столбцы после определенного размера, поэтому она может быть прочитана на мобильных и планшетных устройствах без использования полосы прокрутки.

Это стекирование, но когда пользователь пытается изменить размер окна, столбец заметок не складывается правильно, он переполняется за пределами Div CenterOurTable.

Чтобы дать вам пример проблемы, вот кодекс: https://codepen.io/laurens-van-oorschot/pen/BaaZjxO.

HTML:

<div id="CenterOurTable">
  <div class='container-fluid' style='margin-top: 10px'>
    <div class="table-row header">

      <div class="wrapper attributes">

        <div class="wrapper teacher-class-type-day-times">
          <div class="wrapper teacher-class-type">
            <div class="column  teacher">

              <a class="headerselect" href="#"><i class="fas fa-angle-down"></i> Teacher </div><div class="column evenrowcolor class-type"><a class="headerselect" href="#">Class-type </div>

      </a></div>
            <div class="wrapper day-times">
              <div class="column evenrowcolor day"><a class="headerselect" href="#">Day </div><div class="column  times"><a class="headerselect" href="#">Times </div></a></div>
              <div class="wrapper venue-location-notes">
                <div class="wrapper ">
                  <div class="column  venue"><a class="headerselect" href="#">Venue </div><div class="column evenrowcolor location"><a class="headerselect" href="#">Location </div><div class="column  notes"><a class="headerselect" href="#">Notes </div></a></div>
                </div>
              </div>
            </div>
          </div>
          <div class='container-fluid' style='margin-top: 10px'>
            <div class="table-row ">
              <div class="wrapper attributes">
                <div class="wrapper teacher-class-type-day-times">
                  <div class="wrapper teacher-class-type">
                    <div class="column  teacher">Julie Webb <i class="material-icons add box" style="
    vertical-align: top !important;">
add_box</i><span class="hideinfo"><ul><li><a href='mailto:tuttifruttiyoga@hotmail.com'>tuttifruttiyoga@hotmail.com</a></li><li>07861 719143</li></ul></span></div>
                    <div class="column evenrowcolor class-type">General </div>
                  </div>
                  <div class="wrapper day-times">
                    <div class="column evenrowcolor day">Thursday </div>
                    <div class="column  times">19.45 - 20.45 </div>
                  </div>
                  <div class="wrapper venue-location-notes">
                    <div class="wrapper ">
                      <div class="column  venue">Keig Community Hall
                        <i class="material-icons box add aria-hidden=" true " style=" vertical-align: bottom !important; ">add_box</i>

</i>    <span class="hideinfo "><ul><li>Keig Community Hall</li><li>Keig</li><li>Alford</li><li>AB33 8BH
</li></ul></span></div><div class="column evenrowcolor location ">Alford </div><div class="column notes ">Drop-In Facebook tuttifruttiyogaclasses.Drop-In Facebook tuttifruttiyogaclasses. Drop-In Facebook tuttifruttiyogaclasses. Drop-In Facebook tuttifruttiyogaclasses.  </div></div></div></div></div></div></div></div></div>            </div>

    </div>
</div>
<!-- end container -->
</div>

CSS (МЕНЬШЕ)

/*
 * Define the widths: play around with these 
 * to get a best fit.
 */
@index-width: 0px;
@teacher-width: 240px;
@class-type-width: 250px;
@day-width: 150px;
@times-width: 150px;
@venue-width: 150px;
@location-width: 140px;
@notes-width:140px;
@icon-width: 0px;
@date-width: 0px;
@margin-width: 85px;

/*
 * Basic styles, good for a large display. Everything fits in
 * one row, no wrapping. All text based cells grow equally.
 */
// Main container - row container
.table-row {
  display: flex;          display: -webkit-flex;
  flex-direction: row;    -webkit-flex-direction: row;
  flex-wrap: wrap;     -webkit-flex-wrap: wrap;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  align-items:center;
  justify-content:center;

}

// Wrappers around cells and other wrappers
.wrapper {
  display: flex; display: -webkit-flex;
  flex-direction: row; -webkit-flex-direction: row;

  justify-content:center;
}

// leaf level containers (cells): common properties 
.column {
  flex-grow: 0; -webkit-flex-grow: 2;
  flex-shrink: 0; -webkit-flex-shrink: 0;
  vertical-align: top;
  padding-right:5px;
  padding-left:20px;
}

.material-icons{vertical-align:middle !important;}


.column:not(.teacher,.class-type,.venue,.day) {
 padding-left:0px;
}

// leaf level containers: widths
.index { width: @index-width; }
.teacher { width: @teacher-width; }
.day { width: @day-width; }
.times { width: @times-width; }
.venue { width: @venue-width; }
.location { width: @location-width; }
.notes { width: @notes-width; }
.watch, .add-class-type { width: @icon-width; }
.date { width: @date-width; }

// leaf level containers (cells): special properties 
.index {
  text-align: center;
}

.teacher {
  font-weight: bold;
  color: #337AB5;
  border: 1px solid transparent;


}

.class-type {
  width: @class-type-width;
}

// these are growable text containers, with ellipsis to show truncated text
.1teacher, .1class-type {
  flex-grow: 1; -webkit-flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 4px;
}

.date {
  width: @date-width;
  text-align: right;
  padding-right: 4px;
}

/* growable wrappers */
/*
 .teacher-class-type-day-times, .attributes {
  flex-grow: 1; -webkit-flex-grow: 1;
}
*/

/*
 * Media queries: optimize for different screen widths.
 */

// Wrapper widths
@teacher-class-type-width: max(@teacher-width, @class-type-width);
@day-times-width: max(@day-width, @times-width);
@venue-location-width: max(@venue-width, @location-width);
@teacher-class-type-day-times-width: max(@teacher-width, @class-type-width,
  (@day-width + @times-width) );
@venue-location-notes-width: max(@venue-width, @location-width, 
  @notes-width);
@all-attributes-width: max(@teacher-width, @class-type-width, 
  (@day-width + @times-width), (@venue-width + @location-width));

.horizontal() {
  flex-direction: row;        -webkit-flex-direction: row;
}

.vertical() {
  // Let the wrapper flex vertically, so we get 2 rows
  flex-direction: column;     -webkit-flex-direction: column;
  // can't have the children grow, since this now means vertical growth
  div {
    flex-grow: 0;  -webkit-flex-grow: 0;
  }
}

.vertical-growing() {
  .vertical();
  > div {
    // Let immediate child divs grow horizontally, 100% to fill the wrapper
    width: 100%;
  }
}

/*
 * Media breaks.
 @margin-width * 2 + 
 */

// First break: as many 2-row fields as possible. This will leave notes
// and Dates still horizontal, as they are odd numbered
@media all and (max-width: (@margin-width * 2 + @index-width
  + @teacher-width + @class-type-width + @day-width + @times-width
  + @venue-width + @location-width + @notes-width + @icon-width * 2
  + @date-width * 3) ) {

  .teacher-class-type {
    .vertical-growing();
    width: @teacher-class-type-width;
  }
  .day-times, .venue-location {
    .vertical();
  }
}

// Next: as many 3-rows as possible
@media all and (max-width: (@margin-width * 2 + @index-width
  + @teacher-class-type-width + @day-times-width
  + @venue-location-width  + @notes-width
  + @icon-width * 2 + @date-width * 3) ) {

  // Change day-report back to horizontal, keep it under teacher and class-type
  // So, we have 3 rows: teacher, class-type, day-times
  .day-times {
    .horizontal();
  }
  .teacher-class-type-day-times {
    .vertical-growing();
    width: @teacher-class-type-day-times-width;
  }

  // Line up venue, location, notes into the next column
  .venue-location-notes {
    .vertical();
  }
  // Line up all icons in one column, even though there's only two of them
  .icons {
    .vertical();
  }
  // Line up all dates in one column
  .dates {
    .vertical();
  }

   .wrapper {
    align-items:left !important;
  justify-content:left !important;
  }
}

// Last break: 4 columns: index, attributes, icons, dates
@media all and (max-width: (@margin-width * 2 + @index-width
  + @teacher-class-type-day-times-width + @venue-location-notes-width
  + @icon-width + @date-width) ) {

  // looks better with a little padding on mobile devices
  .table-row {
    padding-left: 4px;
    padding-right: 4px;
     align-items:left !important;
  justify-content:left !important;
  }

  // All attributes: teacher, class-type, day-times, venue-location, notes
  .attributes {
    .vertical-growing();
    width: @all-attributes-width;
  }
  .day-times, .venue-location {
    .horizontal();
  }
  .wrapper {
    align-items:left !important;
  justify-content:left !important;
  }
}



#CenterOurTable {
 max-width:1400px !important;
 margin:0 auto; 
 display: flex;          display: -webkit-flex;
  flex-direction: column;    -webkit-flex-direction: column;
background-color:orange;

}

Answer 1

Ваша основная проблема - заполнение .table-row. У вас есть ширина строки таблицы, установленная на 100%, но также с отступом, и она будет расширяться за пределы контейнера.

Вы можете убрать отступ или установить ширину, смещая отступ, как width: calc(100% - 30px)

После этого у вас все еще есть другая проблема - у вас есть несколько длинных слов в столбце заметок, которые по умолчанию не ломаются и переполняются. Чтобы исправить это, вы должны установить word-break: break-all

РЕДАКТИРОВАТЬ: просто чтобы показать пример, если вы подумаете о реструктуризации разметки, чтобы упростить выравнивание столбцов, я мог бы сделать это как контейнер столбцов, каждый со своимизаголовок - и используйте flex-basis: 140px; max-width: 140px для фиксированной ширины и сгибайте другие.

.row, .col { 
  display: flex;
  flex: 1 1 0
}

.row {
  flex-direction: horizontal
}

.col {
  flex-direction: column
}

.col:first-child {
  align-items: center
}

.notes {
  flex-basis: 200px;
  max-width: 200px;
}

<div class="row">
  <div class="col">
    <div>HEADER (Flex)</div>
    <p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div class="col notes">
    <div>HEADER (Fixed 200px)</div>
    <p>has survivchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</div>