I have a problem to understand how to handle fix width in Flex-Container. Here I have a 1/10/1-Grid and in the first column I need to embed an iframe. It should have always a fixed width while the other 2 columns should be flexible.
How can I do that?
<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<title>R24-Neu</title>
<meta charset="utf-8">
<link rel="icon" type="image/png" href="favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css?t=<?=str_replace(' ', '', microtime());?>" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="d-flex flex-column h-100">
<div class="container-xxl mt-4" style="max-width: 1000px;">
<div class="row">
<div class="col-sm-1 bg-info">1
</div>
<div class="col-sm-10 bg-danger">2
</div>
<div class="col-sm-1 bg-secondary">3
</div>
</div>
<div class="row">
<div class="col-sm-1 bg-info"><iframe src="https://maps.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2702.2211736679656!2d8.531612115622265!3d47.36860157916956!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47900a0215fe7bc1%3A0xb1f301536e06dbe7!2sOberebenestrasse+47%2C+5620+Bremgarten+AG!5e0!3m2!1sde!2sch!4v1522527381540" width="250" height="180" frameborder="0"></iframe>
</div>
<div class="col-sm-10 bg-danger">b
</div>
<div class="col-sm-1 bg-secondary">c
</div>
</div>
</div>
</body>
</html>
Big thanks for assistance nullpunkt
I tried to set a css-width, but this ends in a wrap by bringing the other columns under the first.