为什么 flex-box 会溢出包装器？

Question

我正在基于此 Codepen https://codepen.io/vasansr/pen/PZOJXr 构建响应式 table。基本上它在一定大小后堆叠 headers 和列，因此它在移动和 tablet 设备上可读，无需使用滚动条。

它正在堆叠，但是当用户尝试调整 window 的大小时，注释列没有正确堆叠，它溢出到 CenterOurTable 之外 div。

给你一个问题的例子，这里是代码笔：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 上的填充。您将 table-row 宽度设置为 100%，但也有填充，它会扩展到容器之外。

你可以去掉填充，或者像 width: calc(100% - 30px)

一样设置你的宽度来抵消填充

在那之后你还有另一个问题 - 你的笔记栏中有一些长词默认情况下不会中断并且它们会溢出。要解决这个问题，您必须设置 word-break: break-all

编辑：举个例子，如果你考虑重组你的标记以使列的排列更容易，我可能会把它作为一个列的容器，每个列都有它们的 header - 并使用 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>

为什么 flex-box 会溢出包装器？

Why does flex-box overflow through the wrapper?

html

css

less

flexbox