あのときコード

FlexBox内にwhite-space:preを入れるとflexが効かない場合の対応

html css flex ratio not working

flexboxを作成

<div class="wrap1">
    <div class="box1">
        <div class="content"></div>
        </div>
    <div class="box2">
        <div class="content"></div>
    </div>
    <div class="box3">
        <div class="content"></div>
    </div>
</div>
<style>
    .wrap1 {
        display: flex;
    }
    .wrap1 > div {
        height: 50px;
    }
    .wrap1 .box1 {
        width: 50px;
        background: #F44336;
    }
    .wrap1 .box2 {
        flex: 1;
        background: #FBC02D;
        overflow: hidden;
    }
    .wrap1 .box3 {
        width: 50px;
        background: #BA68C8;
    }
</style>

flexbox内の「flex:1」の要素にpreを追加

preを追加すると、flexboxとしているにもかかわらず、左右にある「赤」「紫」の枠が消えてしまう。

          テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト
      

<div class="wrap2">
  <div class="box1">
    <div class="box_content"></div>
  </div>
  <div class="box2">
    <div class="box_content">
      <pre>
          テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト
      </pre>
    </div>
  </div>
  <div class="box3">
    <div class="box_content"></div>
  </div>
</div>
<style>
  .wrap2 {
    display: flex;
    overflow: hidden;
  }
  .wrap2 > div {
    height: 50px;
  }
  .wrap2 .box1 {
    width: 50px;
    background: #F44336;
  }
  .wrap2 .box2 {
    flex: 1;
    background: #FBC02D;
  }
  .wrap2 .box2 .box_content{
    overflow: hidden;
  }
  .wrap2 .box3 {
    width: 50px;
    background: #BA68C8;
  }
</style>

flexbox内の「flex:1」の要素に「min-width: 0」を追加

意図する表示になる。

          テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト
      

<div class="wrap3">
  <div class="box1">
    <div class="box_content"></div>
  </div>
  <div class="box2">
    <div class="box_content">
      <pre>
          テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト    テキスト
      </pre>
    </div>
  </div>
  <div class="box3">
    <div class="box_content"></div>
  </div>
</div>
<style>
  .wrap3 {
    display: flex;
    overflow: hidden;
  }
  .wrap3 > div {
    height: 50px;
  }
  .wrap3 .box1 {
    width: 50px;
    background: #F44336;
  }
  .wrap3 .box2 {
    flex: 1;
    min-width: 0; /* min-width: 0を追加 */
    background: #FBC02D;
  }
  .wrap3 .box2 .box_content{
    overflow: hidden;
  }
  .wrap3 .box3 {
    width: 50px;
    background: #BA68C8;
  }
</style>

参考サイト