overflow-x doesn't apply inside table cell-CodePudding

I want to add a horizontally scrollable div inside of a table. However, it just makes the table wider. It's going to be reused in various contexts, not just tables, so I can't rely on styling the table to make it work. As you can see below, the code block is scrollable when on its own, but as soon as I put it in a table cell it breaks.

How can I make it scroll horizontally in all cases?

<html>
<head>
<style>
.monospace {
    background-color: #efebeb;
    border-radius: 4px;
    padding: 4px;
    overflow-x: scroll;
    white-space: nowrap;
}
.container {
    display: flex;
    flex-direction: row;
    max-width: 100%;
}
.monospace {
    flex: 1;
    flex-basis: 0;
}
.icon {
    flex: 0;
    flex-basis: 0;
}
</style>
</head>
<body>
    <div >
        <div >eyJraWQiOiJzZXNzaW9uLXNlcnZpY2VcL3Byb2QtMTU5Mjg1ODM5NCIsImFsZyI6IlJTMjU2In0eyJraWQiOiJzZXNzaW9uLXNlcnZpY2VcL3Byb2QtMTU5Mjg1ODM5NCIsImFsZyI6IlJTMjU2In0eyJraWQiOiJzZXNzaW9uLXNlcnZpY2VcL3Byb2QtMTU5Mjg1ODM5NCIsImFsZyI6IlJTMjU2In0eyJraWQiOiJzZXNzaW9uLXNlcnZpY2VcL3Byb2QtMTU5Mjg1ODM5NCIsImFsZyI6IlJTMjU2In0eyJraWQiOiJzZXNzaW9uLXNlcnZpY2VcL3Byb2QtMTU5Mjg1ODM5NCIsImFsZyI6IlJTMjU2In0</div>
        <div >X</div>
    </div>
    <table>
        <tbody>
            <tr>
                <td>
                    <div >
                        <div >eyJraWQiOiJzZXNzaW9uLXNlcnZpY2VcL3Byb2QtMTU5Mjg1ODM5NCIsImFsZyI6IlJTMjU2In0eyJraWQiOiJzZXNzaW9uLXNlcnZpY2VcL3Byb2QtMTU5Mjg1ODM5NCIsImFsZyI6IlJTMjU2In0eyJraWQiOiJzZXNzaW9uLXNlcnZpY2VcL3Byb2QtMTU5Mjg1ODM5NCIsImFsZyI6IlJTMjU2In0eyJraWQiOiJzZXNzaW9uLXNlcnZpY2VcL3Byb2QtMTU5Mjg1ODM5NCIsImFsZyI6IlJTMjU2In0eyJraWQiOiJzZXNzaW9uLXNlcnZpY2VcL3Byb2QtMTU5Mjg1ODM5NCIsImFsZyI6IlJTMjU2In0</div>
                        <div >X</div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

CodePudding user response：

You need to specify a width to the elements. But table will not accept width unless you set table-layout: fixed. Here is a working demo:

.monospace {
    background-color: #efebeb;
    border-radius: 4px;
    padding: 4px;
    overflow-x: scroll;
    white-space: nowrap;
    width:100%;
}
table{
    width: 100%;
    table-layout: fixed;
}

<div >eyJ2UjMTJlI6IyZsFmIsICN5MDO1gjM5UTMtQ2byB3LcV2YpZnclNXLu9WazNXZzJiOiQWarJye0nI2UjMTJlI6IyZsFmIsICN5MDO1gjM5UTMtQ2byB3LcV2YpZnclNXLu9WazNXZzJiOiQWarJye0nI2UjMTJlI6IyZsFmIsICN5MDO1gjM5UTMtQ2byB3LcV2YpZnclNXLu9WazNXZzJiOiQWarJye0nI2UjMTJlI6IyZsFmIsICN5MDO1gjM5UTMtQ2byB3LcV2YpZnclNXLu9WazNXZzJiOiQWarJye0nI2UjMTJlI6IyZsFmIsICN5MDO1gjM5UTMtQ2byB3LcV2YpZnclNXLu9WazNXZzJiOiQWarIn0</div>

<table>
    <tbody>
        <tr>
            <td>
                <div >eyJ2UjMTJlI6IyZsFmIsICN5MDO1gjM5UTMtQ2byB3LcV2YpZnclNXLu9WazNXZzJiOiQWarJye0nI2UjMTJlI6IyZsFmIsICN5MDO1gjM5UTMtQ2byB3LcV2YpZnclNXLu9WazNXZzJiOiQWarJye0nI2UjMTJlI6IyZsFmIsICN5MDO1gjM5UTMtQ2byB3LcV2YpZnclNXLu9WazNXZzJiOiQWarJye0nI2UjMTJlI6IyZsFmIsICN5MDO1gjM5UTMtQ2byB3LcV2YpZnclNXLu9WazNXZzJiOiQWarJye0nI2UjMTJlI6IyZsFmIsICN5MDO1gjM5UTMtQ2byB3LcV2YpZnclNXLu9WazNXZzJiOiQWarIn0</div>
            </td>
        </tr>
    </tbody>
</table>