具有溢出功能的Flexbox 2列布局

Question

我想使用flexbox生成一个包含多行的2列布局。右侧的列应该很小，并固定在右侧。左列应该填充剩余的空间，直到可见宽度变满，然后不中断文本，而是隐藏它(使用overflow)。

目前我正在使用下面的代码，它不起作用：

​

.flex-container {
    display: flex;
    flex-direction: row;
}
.flex-1 {
    flex: 0 0 auto;
    border: 1px solid black;
    
}
.row {
    text-overflow: ellipsis;
    overflow: hidden;
}
.flex-2 {
    flex: 0 0 auto;
    border: 1px solid black;
}

<div class="flex-container">
    <div class="flex-1">
        <span class="row">
        Lorizzle ipsizzle dolizzle sit amizzle, consectetuer adipiscing yo mamma. Nullam sapien velizzle, its fo rizzle volutpizzle, suscipit for sure, brizzle vizzle, its fo rizzle. Pellentesque we gonna chung tortizzle. Sed eros. Stuff fizzle dolor dapibus turpizzle tempizzle shizznit. pellentesque nibh et turpizzle. Vestibulum izzle tortor. Gangsta mammasay mammasa mamma oo sa rhoncus fo shizzle. Izzle the bizzle habitasse bow wow wow dictumst. Dang dapibizzle. I'm in the shizzle we gonna chung urna, pretizzle eu, mattis mah nizzle, eleifend phat, nunc. Stuff suscipizzle. Integer sempizzle velit sizzle mofo.</span>
    </div>
    <div class="flex-2">XX</div>
</div>
<div class="flex-container">
        <div class="flex-1">
            <span class="row">
            Lorizzle ipsizzle dolizzle sit amizzle, consectetuer adipiscing yo mamma. Nullam sapien velizzle, its fo rizzle volutpizzle, suscipit for sure, brizzle vizzle, its fo rizzle. Pellentesque we gonna chung tortizzle. Sed eros. Stuff fizzle dolor dapibus turpizzle tempizzle shizznit. pellentesque nibh et turpizzle. Vestibulum izzle tortor. Gangsta mammasay mammasa mamma oo sa rhoncus fo shizzle. Izzle the bizzle habitasse bow wow wow dictumst. Dang dapibizzle. I'm in the shizzle we gonna chung urna, pretizzle eu, mattis mah nizzle, eleifend phat, nunc. Stuff suscipizzle. Integer sempizzle velit sizzle mofo.</span>
        </div>
        <div class="flex-2">XX</div>
    </div>

​

Answer 1

相对定位.flex-1，这样你就可以绝对定位你的跨度.row了。让它的大小为您的弯曲.flex-1，并应用您想要的溢出。

​

.flex-container{
  display: flex;
}
.flex-1{
  flex: 1;
  position: relative;
}
.row{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="flex-container">
  <div class="flex-1">
    <span class="row">
      Lorizzle ipsizzle dolizzle sit amizzle, consectetuer adipiscing yo mamma. Nullam sapien velizzle, its fo rizzle volutpizzle, suscipit for sure, brizzle vizzle, its fo rizzle. Pellentesque we gonna chung tortizzle. Sed eros. Stuff fizzle dolor dapibus turpizzle tempizzle shizznit. pellentesque nibh et turpizzle. Vestibulum izzle tortor. Gangsta mammasay mammasa mamma oo sa rhoncus fo shizzle. Izzle the bizzle habitasse bow wow wow dictumst. Dang dapibizzle. I'm in the shizzle we gonna chung urna, pretizzle eu, mattis mah nizzle, eleifend phat, nunc. Stuff suscipizzle. Integer sempizzle velit sizzle mofo.
    </span>
  </div>
  <div class="flex-2">XX</div>
</div>
<div class="flex-container">
  <div class="flex-1">
    <span class="row">
      Lorizzle ipsizzle dolizzle sit amizzle, consectetuer adipiscing yo mamma. Nullam sapien velizzle, its fo rizzle volutpizzle, suscipit for sure, brizzle vizzle, its fo rizzle. Pellentesque we gonna chung tortizzle. Sed eros. Stuff fizzle dolor dapibus turpizzle tempizzle shizznit. pellentesque nibh et turpizzle. Vestibulum izzle tortor. Gangsta mammasay mammasa mamma oo sa rhoncus fo shizzle. Izzle the bizzle habitasse bow wow wow dictumst. Dang dapibizzle. I'm in the shizzle we gonna chung urna, pretizzle eu, mattis mah nizzle, eleifend phat, nunc. Stuff suscipizzle. Integer sempizzle velit sizzle mofo.
    </span>
  </div>
  <div class="flex-2">XX</div>
</div>

​

Answer 2

.flex-container {
  display: flex;           /* Magic begins */
}
.flex-1 {
  flex: 1;                 /* Start at 0 width. Then grow to fill available space*/
  white-space: nowrap;     /* Prevent line breaks */
  overflow: hidden;        /* Hide overflow */
  text-overflow: ellipsis; /* Show ellipsis */
}

​

.flex-container {
  display: flex;           /* Magic begins */
}
.flex-1 {
  flex: 1;                 /* Start at 0 width. Then grow to fill available space */
  white-space: nowrap;     /* Prevent line breaks */
  overflow: hidden;        /* Hide overflow */
  text-overflow: ellipsis; /* Show ellipsis */
  border: 1px solid black;
}
.flex-2 {
  border: 1px solid black;
}

<div class="flex-container">
  <div class="flex-1">
    Lorizzle ipsizzle dolizzle sit amizzle, consectetuer adipiscing yo mamma. Nullam sapien velizzle, its fo rizzle volutpizzle, suscipit for sure, brizzle vizzle, its fo rizzle. Pellentesque we gonna chung tortizzle. Sed eros. Stuff fizzle dolor dapibus turpizzle tempizzle shizznit. pellentesque nibh et turpizzle. Vestibulum izzle tortor. Gangsta mammasay mammasa mamma oo sa rhoncus fo shizzle. Izzle the bizzle habitasse bow wow wow dictumst. Dang dapibizzle. I'm in the shizzle we gonna chung urna, pretizzle eu, mattis mah nizzle, eleifend phat, nunc. Stuff suscipizzle. Integer sempizzle velit sizzle mofo.
  </div>
  <div class="flex-2">XX</div>
</div>
<div class="flex-container">
  <div class="flex-1">
    Lorizzle ipsizzle dolizzle sit amizzle, consectetuer adipiscing yo mamma. Nullam sapien velizzle, its fo rizzle volutpizzle, suscipit for sure, brizzle vizzle, its fo rizzle. Pellentesque we gonna chung tortizzle. Sed eros. Stuff fizzle dolor dapibus turpizzle tempizzle shizznit. pellentesque nibh et turpizzle. Vestibulum izzle tortor. Gangsta mammasay mammasa mamma oo sa rhoncus fo shizzle. Izzle the bizzle habitasse bow wow wow dictumst. Dang dapibizzle. I'm in the shizzle we gonna chung urna, pretizzle eu, mattis mah nizzle, eleifend phat, nunc. Stuff suscipizzle. Integer sempizzle velit sizzle mofo.
  </div>
  <div class="flex-2">XX</div>
</div>

​