Question 45912 in CSS Question posted in
Some basic documentation can be found here.

CSS. Make parent have child width

I have table with 700px width and row with 1400px width, so table will have horizontal scroll. How to make body element to have width same as row has?

<div style={{ width: 700, overflow: 'auto' }} className='table'>
    <div className='body'>
      <div style={{ width: 1400 }}  className='row' />
    </div>
</div>

Currently body has table width(which is 700px) and I can’t find any way to increase it

Tags:

2

Answers


  1. 0

    You can use max-content on the body element to take the width of its children.

    return (
  <div style={{ width: 700, overflow: "auto" }} className="table">
    <div
      className="body"
      style={{
        width: "max-content",
      }}
    >
      <div style={{ width: 1400 }} className="row" />
    </div>
  </div>
);
    Login or Signup to reply.
  2. 0

    You can use this:

    style={{width: "fit-content"}}

    Be sure to check its’ compatibility here.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search