Title rewritten as: flexbox menu and table with title - is it possible to truncate the title based on table width?

Question

I want to achieve something like this by using flexboxCSS. The menu is fixed width, but the table can grow automatically, and the header should not exceed the table width, even if it is long. In other words, the table should be able to stretch the column containers, but the headers shouldn't. +----+--------+|Menu|Title||+--------+||Table|+----+--------+ This can be easily achieved with just one flex column. &lt;html&gt;&lt;style&gt;

P粉512526720 · Answer

So you want the element containing the title to change in size with its sibling elements, but without affecting its own child elements.

The only way I can think of is to wrap the title text in an appropriate element - in this case - and then use position: absolute to remove it from Take it out of the flow and use position: relative on the parent element of the title. Then you need to set some height to the title.

Example

I replaced the width with flex: 0 0 200px. This will keep the menu from changing size, always staying at 200px.

.main {
  display: flex;
}

.menu {
  background-color: #222222;
  flex: 0 0 200px; /*改变了*/
}

td {
  font-size: 60px;
}

.container {
  font-size: 60px;
  background-color: yellow;
  display: flex;
  flex-direction: column;
  width: maxwidth; /*将宽度改为maxwidth*/
}

.item1 {
  background-color: red;
  white-space: nowrap;
  overflow: hidden;
  position: relative; /*添加了*/
  height: 1.2em; /*添加了*/
}

.item1 span {
  position: absolute; /*添加了*/
}

.item2 {
  background-color: blue;
}


  
    菜单
  

  
    The quick brown fox jumped over the lazy dog
    
      
        
          数据
          数据
          数据