질문있습니다!! div 안의 안쪽 요소 사이즈

선생님....!!
react-bootstrap 중에 https://react-bootstrap.netlify.app/components/carousel/#carousels 이 항목을 사용했을때 
해당 들어있는 내용물의 크기에 따라 큰 박스가 유동적으로 사이즈가 변경이 되는데 혹시 이 큰 박스의 크기는  고정 시키면서 안쪽 항목을 작게 만드는 방법이 어떻게 될까요? 

2. https://btl831.github.io 를 참고로 가운데 Go song을 눌렀을때 쥐똥만하게 modal 이 뜨는데 크게만들어주고 싶습니다...! 혹시 이부분에선 어떻게 해야할까요?

2번에 대한 코드입니다

import React, {useState} from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import {Modal, Button} from 'react-bootstrap';
import ReactPlayer from "react-player";

export default function InfoModal(props) {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
 
return (
<>
<Button className="nextButton" variant="secondary" onClick={handleShow}>
Go Song
</Button>
<Modal show={show} onHide={handleClose}
centered>
 
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
 
 
<Modal.Body>
<div className = "row">
<div className="col-6" >
<ReactPlayer
url = {props.곡.link}
width='100%'
height='100%'
playing controls/>
</div>
<div className ="col-6">
제목 : {props.곡.song}
</div>
</div>
 

</Modal.Body>
<Modal.Footer>
 
</Modal.Footer>
</Modal>
</>
);
}