Переполнение в таблице с узким столбцом

Question

Я пытаюсь сделать элемент в таблице переполнением: авто.Поэтому, когда содержимое (обычно json) превышает доступную ширину, появляется полоса прокрутки.Вдобавок ко всему, я пытаюсь сделать первый столбец таким же узким, как и содержимое, не разбиваясь на пустое пространство.Но до сих пор я не смог получить желаемый эффект.Я попытался исправить приоритет таблицы, но из-за этого узкий столбец ведет себя не так, как я хочу, но вызывает переполнение элемента.Только удалив или установив узкую часть из первого столбца и сделав таблицу фиксированной или установив фиксированную ширину столбца, можно будет переполнить элемент.У кого-нибудь есть идеи?

.table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: solid 1px black;
}

.table td,
.table th {
  padding: 5px;
  border: 1px solid black;
}

.table .narrow {
  width: 1px;
}

.whitespace-nowrap {
  white-space: nowrap;
}

pre {
  overflow: auto;
  border: 1px solid grey;
  margin: 0;
}

  
    
      Narrow
      <!-- want this column to be narrow (as width as the content) -->
      Fill up remaining space
      <!-- takes the remaining space -->
      Fill up remaining space
      <!-- takes the remaining space -->
    
  
  
    
      
        <!-- want this column to be narrow (as width as the content) -->
        long_attribute_name
      
      Foobar
      <!-- takes the remaining space -->
      Blah
      <!-- takes the remaining space -->
    
    
      
        <!-- want this column to be narrow (as width as the content) -->
        attribute_2
      
      
        {
  "width": "want this pre element to display scrollbars in the table if exceeds the available width"
}

{
  "width": "want this pre element to display scrollbars in the table if exceeds the available width"
}